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;'> <a href="Your-First-Headline-Url-Here"> <font color=#ffffff> <b>Your-First-Headline-Title-Here</b></font> </a></span> <b>Your-First Headline-Description</b> <span style='background-color:#FFAA00;'> <a href="Your-Second-Headline-Url-Here"> <font color=#ffffff> <b>Your-Second-Headline-Title-Here</b></font> </a></span> <b>Your-Second-Headline-Description-Here</b> <span style='background-color:#0088FF;'> <b><a href="Your-Third-Headline-Url-Here"><font color=#ffffff>Your-Third-Headline-Title-Here</font></a></b> </span> <b>Your-Third-Headline-Description-Here</b> <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 followsFor 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;'> <a href="Your-Headline-Url-Here"> <font color=#ffffff> <b>Your-Headline-Title-Here</b></font> </a></span> <b>Your-Headline-Description</b>
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:
Recommended For You:
Easy To Install And Looking Awesome...It Attracts The Visitors
ReplyDelete@Ramakrishna Ch
ReplyDeleteThanks Pal for liking the widget and for considering awesome. Peace
nice faizan bro,
ReplyDeletebeautiful cartoons in all your posts.I realy like you blog.
@SR
ReplyDeleteThank You very Much pal, Readers like you are highly appreciated. Keep loving it buddy. Peace and Blessings
Thanks bro,
ReplyDeleteWell 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
@SR
ReplyDeleteThanks 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
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@commonground
ReplyDeleteThanks 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
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@sangmitra rawat
ReplyDeleteYeah 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
Thanks......
ReplyDeleteHey Syed Faizan!
ReplyDeletei 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
Well, We can't change its Direction. For that we have to Edit The JavaScript. http://mybloggerlab.com/Scripts/webticker_lib.js
DeleteThis Scrolling News Update Headline Ticker Is Awesome....? I am See Many Headline Updater But This is Really Coool
ReplyDeleteFeel Free To Visit My Website :-> Www.Tipsntricks4fun.in
And Thank you So much For Sharing This Script....
Hey buddy i simply love it. Can we adjust also its height? Check it out on my blog and let me know. Thanks!
ReplyDeletehttp://officialandreascy.blogspot.com
i want Scrolling left to right but ur widget is going right to left with urdu nori fount my urdu news bloger
ReplyDeletehttp://bharakahutimes.blogspot.com
You cannot change the directions
DeleteBtw it works properly only with chrome and firefox. With IE is weird. Any solution?
ReplyDeleteIE is sluggish and old browser, no one use it these days!
DeleteGreat tool. Is it possible to modify with the following:
ReplyDelete1. 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?
Unfortunately, this widget is not robust enough to support these fancy things.
Deletethank 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...
ReplyDeleteplease one more thing ! what if you want it to scroll upwards instead of sidewards how do you do it ?
Amazing, But i want news update widget which is automatically update recent post.
ReplyDeleteNot enter any url for the further post.
Here's auto update ticker
Deletehttp://www.mybloggerlab.com/2014/12/how-to-add-rss-feed-news-ticker-in-blogger-sidebar.html
how can I use this widget without Links?
ReplyDeleteIs there a way to make this code to automatically take posts from recent posts?
ReplyDeleteHere's auto update ticker
Deletehttp://www.mybloggerlab.com/2014/12/how-to-add-rss-feed-news-ticker-in-blogger-sidebar.html
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