Scrolling News Update Headline Ticker For Blogger With Jquery Effect

10 February 2013

Scrolling News Update Headline Ticker For Blogger With Jquery Effect

Namecheap.com - Cheap domain name registration, renewal and transfers - from only $3.98/Year

A News Ticker is becoming the basic requirement of every blog. To make our blogging community more reliable it is essential that we keep our readers up to date and News Ticker is the best way of doing that. We can use the News Ticker to give frequent updates to our reader in just few clicks. We all have seen many news tickers in those blogs which are hosted by WordPress but Blogger is not knows for its plugins this is the reason why we use external source widgets in blogger. And today we will follow the same trend to add a Animated Scrolling JQuery News Ticker Widget in Blogger Blogspot Blogs.

Scrolling News Update Headling Ticker Widget For Blogger

Features News Ticker:

Easy to embed into an HTML document
Compatible with Internet Explorer, FireFox, Chrome and etc
Full JavaScript: no plugin, no Java, no ActiveX
Supports full HTML, including images, links and any other tags
Smooth scrolling
Very small script - fast to download
Easy to customize
Stops scrolling when the mouse is over it

Adding News Ticker in Blogger

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

Step# 1: Go to Blogger.com >> Your Blog

Step# 2: Layout >> Add a Gadget

Step# 3: Add Html/Javascript and just Paste the following 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="Your-First-Headline-Url-Here"> <font color=#ffffff> <b>Your-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="Your-Second-Headline-Url-Here"> <font color=#ffffff> <b>Your-Second-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Your-Second-Headline-Description-Here</b>&nbsp; 




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

 

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/webticker_lib.js" language="javascript"></script></b></span></div>


</b:if></b:if>

Customization

To Customize your News ticker do as follows

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 change 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

Remember: 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="Your-Headline-Url-Here"> <font color=#ffffff> <b>Your-Headline-Title-Here</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Your-Headline-Description</b>&nbsp;

Step# 4: Now after customizing your ticker Press Save button and now go and to your blog and enjoy MBL Scrolling Jquery Ticker

So that's how you can add a Scrolling News Update Headline Ticker in Blogger. If you feel any difficulty feel free to ask. Til then peace blessing and Happy News ticking

Please Share it! :)

0 comments:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Imtiaz Ahmed

10 February 2013