May 1, 2012

Scrolling News Update Headline Ticker For Blogger With Jquery Effect

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.


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="https://mybloggerlab.googlecode.com/files/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

RememberIf 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 

Recommended For You:


28 comments:

  1. Easy To Install And Looking Awesome...It Attracts The Visitors

    ReplyDelete
  2. @Ramakrishna Ch
    Thanks Pal for liking the widget and for considering awesome. Peace

    ReplyDelete
  3. nice faizan bro,
    beautiful cartoons in all your posts.I realy like you blog.

    ReplyDelete
  4. @SR
    Thank You very Much pal, Readers like you are highly appreciated. Keep loving it buddy. Peace and Blessings

    ReplyDelete
  5. Thanks bro,
    Well now days your posts are better than MBT (in the absence Mohammed).Thanks for sharing good articles.
    Just look my new theme and please feel free to leave your comments and opinions

    ProZain:Free Premium Blogger Template

    ReplyDelete
  6. @SR
    Thanks Brother, And Mohammed is just awesome he is my inspiration thanks pal. And yes I saw this theme today. And Left a Comment also. Keep motivated pal going great. Peace and Blessing buddy

    ReplyDelete
  7. This is great, and a good blog too! really good of you to share. I have been playing with the ticker and increased the height, but can't seem to figure out how to get the text scrolling across the middle, instead of aligned to the top?

    ReplyDelete
  8. @commonground
    Thanks Pal For liking the widget and Blog. And Keep Playing as playing is the best way to Learn. Brother Can You Please Give Your Blog URL So we can Help You further In the alignment of Text. Peace

    ReplyDelete
  9. hey syed faizan ali can u tll me i have installed a new template in blogger blog now there is no opttion to view older and newer post in the template can u tll me how to install it.

    ReplyDelete
  10. @sangmitra rawat
    Yeah We Will More Then Happy To Help You. Can You Provide me Your Blog URL. Or if you want me to Do Your Work Just Send me the Downloading Link Of your Blogger Template in XML Format Via Our Contact Us Page. Peace

    ReplyDelete
  11. Hey Syed Faizan!
    i want Scrolling left to right but ur widget is going right to left
    what i have to do?
    My Blog is
    http://kabotarjaja.blogspot.com

    ReplyDelete
    Replies
    1. Well, We can't change its Direction. For that we have to Edit The JavaScript. http://mybloggerlab.com/Scripts/webticker_lib.js

      Delete
  12. This Scrolling News Update Headline Ticker Is Awesome....? I am See Many Headline Updater But This is Really Coool

    Feel Free To Visit My Website :-> Www.Tipsntricks4fun.in

    And Thank you So much For Sharing This Script....

    ReplyDelete
  13. Hey buddy i simply love it. Can we adjust also its height? Check it out on my blog and let me know. Thanks!

    http://officialandreascy.blogspot.com

    ReplyDelete
  14. i want Scrolling left to right but ur widget is going right to left with urdu nori fount my urdu news bloger
    http://bharakahutimes.blogspot.com

    ReplyDelete
  15. Btw it works properly only with chrome and firefox. With IE is weird. Any solution?

    ReplyDelete
    Replies
    1. IE is sluggish and old browser, no one use it these days!

      Delete
  16. Great tool. Is it possible to modify with the following:
    1. Scroll up or down
    2. Add height
    3. Include images

    I'm having serious issues with my marquee. My webpage (blog) usually delays for few seconds when loading and during the delay, the contents of the marquee spills over the marquee and covers other contents of the webpage. After the webpage has loaded completely the marquee adjusts itself and the spilled contents rearranges inside properly. Is there a way out?

    ReplyDelete
    Replies
    1. Unfortunately, this widget is not robust enough to support these fancy things.

      Delete
  17. thank you man.. i have really tried a lot of them following what other blogs are saying but doesn't give me a good result.... but yours is exceptional thanks a lot...
    please one more thing ! what if you want it to scroll upwards instead of sidewards how do you do it ?

    ReplyDelete
  18. Amazing, But i want news update widget which is automatically update recent post.
    Not enter any url for the further post.

    ReplyDelete
    Replies
    1. Here's auto update ticker

      http://www.mybloggerlab.com/2014/12/how-to-add-rss-feed-news-ticker-in-blogger-sidebar.html

      Delete
  19. how can I use this widget without Links?

    ReplyDelete
  20. Is there a way to make this code to automatically take posts from recent posts?

    ReplyDelete
    Replies
    1. Here's auto update ticker

      http://www.mybloggerlab.com/2014/12/how-to-add-rss-feed-news-ticker-in-blogger-sidebar.html

      Delete
  21. Well this is embarrsing I tried to add it but for some reason its not showing, Please help my blog is www.ahmhao.com

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.