Scrolling News Update Headline For Blogger | Jquery Effect

Scrolling News Ticker For blogger is a basic requirement of every blog. To build your blogging community more dependable it is essential that you keep your readers up to date and News Ticker is the best way of doing that. You can use the Scrolling news widget for blogger to give frequent updates to your reader in just few clicks. WordPress blog have many plug-in to create it but Blogger is not known for its plugins this is the reason why we use external source widgets in blogger. So now in this post we will follow the same style to add a Animated Scrolling JQuery News Ticker Widget in Blogspot Blogs.

Scrolling News Update Headline


Adding Scrolling News Update Headline For Blogger:

To insert MBL Scrolling JQuery News Ticker in Blogger Follow these Steps.

Step# 1: Log in to your Blogger Dashboard.
Step# 2: Layout >> Add a Gadget
Step# 3: Add Html/Javascript and just Paste the below code


    <div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">

      <span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="First-Headline-Url-Here"> <font color=#ffffff> <b>First-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Your-First Headline-Description</b>&nbsp;

      <span style='background-color:#FFAA00;'> &nbsp; &nbsp;<a href="Second-Headline-Url-Here"> <font color=#ffffff> <b>Second-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Second-Headline-Description-Here</b>&nbsp;

      <span style='background-color:#0088FF;'> &nbsp; &nbsp; <b><a href="Third-Headline-Url-Here"><font color=#ffffff>Third-Headline-Title-Here</font></a></b>&nbsp; &nbsp; </span> &nbsp; <b>Third-Headline-Description-Here</b>&nbsp; 
    
    <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/webticker_lib.js" language="javascript"></script></b></span></div>
    </b:if></b:if>


Customization
Customize your News ticker do like this:

For First Headline:
Replace Your-First-Headline-Url-Here With the URL of your first headline post.
Replace Your-First-Headline-Title-Here With the Title of your headline post
Replace Your-First Headline-Description With the small description of your headline
To modify colors simply replace #7FB51A and #ffffff

For Second Headline:
Replace  Your-Second-Headline-Url-Here  With the URL of your first headline post.
Replace Your-Second-Headline-Title-Here With the Title of your headline post
Replace Your-Second-Headline-Description With the small description of your headline
To change colors simply replace #7FB51A and #ffffff

For Third Headline:
Replace Your-Third-Headline-Url-Here With the URL of your first headline post.
Replace Your-Third-Headline-Title-Here With the Title of your headline post
Replace Your-Third-Headline-Description With the small description of your headline

To change colors simply replace #7FB51A and #ffffff
To Change width of the ticker replace 520px

One thing: If you want to add more Headlines in your ticker then just before <script type="text/javascript" Add the following code and this will add one more headline in your ticker.

    <span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="Headline-Url-Here"> <font color=#ffffff> <b>Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Headline-Description</b>&nbsp;



Step# 4: Now Press Save button and enjoy MBL Scrolling Jquery Ticker.

That’s it, how you can add a Scrolling News Ticker For blogger. If you feel any difficulty feels free to ask us via comments.



3 comments:

  1. Well this is pretty cool, however can the design be something better?

    Regards

    Most Useful Drills

    ReplyDelete
  2. this is good news for blogger who using blogspot platform.
    regards,
    best Ncert books

    ReplyDelete
  3. Thank you for your post, I look for such article along time. myself very happy to read it because it can give me more insight,thanks.
    poker online betting

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld