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.

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-HereWith the URL of your first headline post.

Replace Your-First-Headline-Title-HereWith 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-DescriptionWith 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-DescriptionWith 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.