Scrolling News Update Headline Ticker For Blogger With Jquery Effect

Advertisements
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:


Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

28 comments

May 2, 2012 at 8:24 AM

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

Editorial Team MOD
May 2, 2012 at 10:15 AM

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

SR
May 2, 2012 at 12:55 PM

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

Editorial Team MOD
May 2, 2012 at 8:22 PM

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

SR
May 3, 2012 at 2:33 AM

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

Editorial Team MOD
May 3, 2012 at 2:42 AM

@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

May 7, 2012 at 10:08 AM

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?

Editorial Team MOD
May 7, 2012 at 10:15 AM

@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

May 19, 2012 at 11:54 AM

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.

Editorial Team MOD
May 19, 2012 at 12:06 PM

@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

October 17, 2012 at 3:43 AM

Thanks......

December 30, 2012 at 10:26 PM

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

Editorial Team MOD
December 31, 2012 at 12:34 AM

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

February 1, 2013 at 5:33 AM

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

February 16, 2013 at 5:46 AM

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

MAQ
February 21, 2013 at 11:37 AM

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

February 21, 2013 at 12:20 PM

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

Editorial Team MOD
February 21, 2013 at 12:55 PM

You cannot change the directions

Editorial Team MOD
February 21, 2013 at 12:55 PM

IE is sluggish and old browser, no one use it these days!

April 23, 2013 at 8:53 AM

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?

Editorial Team MOD
April 24, 2013 at 1:25 AM

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

BE
August 4, 2013 at 11:16 AM

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 ?

August 17, 2013 at 2:42 AM

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

December 10, 2014 at 11:52 AM

how can I use this widget without Links?

January 18, 2015 at 1:37 PM

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

Editorial Team MOD
January 24, 2015 at 9:14 AM

Here's auto update ticker

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

Editorial Team MOD
January 24, 2015 at 9:17 AM

Here's auto update ticker

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

Anonymous
March 2, 2016 at 3:17 AM

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

Post a Comment

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.