Beautiful News Ticker widget for Blogger

How to add news ticker widget in Google blog

news ticker

News ticker concept evolve from online newspaper site. Basically it was used for quick view some breaking news on news site. For the time being this feature using in Blog site which is not only about news but also using in multiple purpose blog including personal & professional. So this is a latest trend in blogging platform. If you look through in paid theme then you would see news ticker widget is an integral part of the theme or template. So there are many developer and widget builder created code with attractive outlook.

Formerly latest news or news ticker widget was not available for Google Blogger but now this widget is widely using by enormous user.  I think this is an important widget that should include in your blog to display your latest post or news. As a result your blog visitor will find your blog user friendly.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Template -> Edit HTML

Step 3 Now find </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 And paste the below code above </b:skin>

/* News Ticker by */
.BSNews {background:#eeeeee;width:100%;font-family:Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.4em;display:inline-block;margin-right:25px;margin-top:9px;}
.news {width:100%;margin:0 auto;padding:0 2px;line-height: 1.4em;text-align:left;font:normal 13px Arial;color:#000000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#333333;text-decoration:underline;}


  • To change the background color of Latest News holder Box just change the #eeeeee code with different color. You can use Photoshop to generate color code or use our color picker.

Step 5 Now find </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 And paste the below code above/before </head>

<script src='' type='text/javascript'></script>
<!-- News Ticker -->
<script src=''></script>
<script type='text/javascript'>
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};

  • In the above script I have added a JavaScript file and this is optional to add. If you have already included this code then don't add the bold code.

<script src='' type='text/javascript'></script>
Step 7 Now find <div id='content-wrapper'> or <div id='main-wrapper'>
Or <div class='main-outer'> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 8 And paste the below code above/before the founded code.

<div class='BSNews'>
<div class='news'>
<div style='float:left;padding:6px 10px 8px 4px;font:normal 100% Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;color:#FEFEFE;background-color:#000000;text-transform:none;'>
News Update : </div>
<div style='float:left;width:80%;padding:6px 4px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Blogger Spice", "") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
</div><div style='clear:both;'></div>


  • To change the background color of Latest News Box just change the #000000 code with different color. You can use Photoshop to generate color code or use our color picker.
  • Replace with your blog address.
Step 9 Now simply hit the Save template button. And check your template to see the effect.

I hope you have successfully added Latest news widget. Whenever you publish a new post then it will display your latest post link with publishing date. This is basic and simple news ticker but hopefully I will develop some advance news ticker soon. If you face any trouble to install this widget then feel free to leave a comment below.
esobondhu says: 9/26/2014

Nice work bro :D

BloggerSpice says: ADMIN 9/26/2014

Thanks Aslam...for your feedback.

Unknown says: 10/01/2014

Ticker was great bro! Gud Job;)

BloggerSpice says: ADMIN 10/01/2014

Thanks Dixit...long time no news!!!

Kamera Media says: 10/24/2014

i've changed the url with my blog url, but there the latest update doest show anything. can you help me please sir?

BloggerSpice says: ADMIN 10/26/2014

Hi Ezham..maybe problem with JavaScript file. if your template contain 2 same JavaScript file then it will not work. moreover..If your template hasn't any latest JavaScript file also then this widget will not work. kindly send me your blog link through my contact us page. I will check your blog. Thanks.

সত্য মানব says: 2/26/2015

Excellent Tips For Blogger Site....Wait For Your Next Helpful Tips......Techtunesu

Unknown says: 3/05/2015
This comment has been removed by the author.
Unknown says: 3/05/2015
This comment has been removed by the author.
Unknown says: 3/05/2015

working fine thanx

Unknown says: 3/05/2015

i want to add marquee function in this can u help me for this

BloggerSpice says: ADMIN 3/05/2015

I just checked your Blog.. News ticker is working perfectly.

BloggerSpice says: ADMIN 3/05/2015

I will try to share it soon.. But Now I am working on another widget.

Indian Defence News says: 4/25/2015

Great Widget! Really appreciate your work! It would be even more attractive if you can include transition/scroll of the feed from either "UP" or "DOWN". Any thoughts on this? Thank you!

Indian Defence News says: 4/25/2015

Awesome Widget! Great and simple coding... easy to follow even for novices! It would be nice if text can be scrolled either "UP" , "DOWN", "RIGHT", "LEFT", "SWIPE" etc. Thanking you for the Widget!

Unknown says: 5/02/2015

Thanks!! amazing really beauty, i have a question i delete margin top but i see a space at the end how i can edit this?? i leave my blog Thank you again!!

BloggerSpice says: ADMIN 5/02/2015

Hi Gelmer..your given domain name is not accessible. So please write the correct domain. Otherwise I can't give you the solution.

Unknown says: 5/02/2015

I have not idea the domain is that but i leave you a screen thanks mohammad!!

BloggerSpice says: ADMIN 5/03/2015

Hi Gelmer.. please adjust the to padding code from above script.

padding:6px 10px 8px 4px;

padding:6px 4px;

alter 6 with lesser will help you to remove space. Thanks.

Unknown says: 5/03/2015

Thanks mohammad i fix it deleting "display:inline-block". My site looks great with your widget!!

Unknown says: 7/20/2015

Hi am getting your blog post notifications on my blog when i applied the above codes
How can i change it Bro..

Unknown says: 7/20/2015

Sorry Bro working Properly On My site..

BloggerSpice says: ADMIN 7/21/2015

Nice to hear that..

Tankred Tecklenburg says: 11/22/2015

Hi. How can you post two such tickers, for two different feeds, on the same webpage? Simply adding the HTML of the second feed below the first one does not do the trick for me.

BloggerSpice says: ADMIN 11/22/2015

I didn't add 2 different feed at a time. For displaying widget color I have take screenshot 3 times and added in post page.

Tankred Tecklenburg says: 11/22/2015

I know you didn't. I installed your news ticker and it is working flawlessly. However, I would like to install a second news feed below it, and I wonder how I can do it with your code.

BloggerSpice says: ADMIN 11/23/2015

IF you want to use another news ticker then just you have to change the code--- for example add 1 with all line BSNews, News. eg. BSNews1, News1... take a look at below example-

.BSNews1 {background:#eeeeee;width:100%;font-family:Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.4em;display:inline-block;margin-right:25px;margin-top:9px;}
.news1 {width:100%;margin:0 auto;padding:0 2px;line-height: 1.4em;text-align:left;font:normal 13px Arial;color:#000000;overflow:hidden;clear:both;}
.news1 a:link, .news a:visited{color:#000000;text-decoration:none;}
.news1 a:hover {color:#333333;text-decoration:underline;}

I hope it will work for you. Thanks

Tankred Tecklenburg says: 12/02/2015

Unfortunately, google.feeds has been deprecated today on many Blogger blogs. The newsticker is now defunct and the error message "Google Feed API Error: This API is no longer available" appears when visiting these blogs. Do you think y could you base your newsticker on a different API to make it work again?!msg/blogger/pHMsmoqLXpY/7nJ2-4JHDAAJ

BloggerSpice says: ADMIN 12/02/2015

Hi There I think this is bit complected right now. I will try to fix it up. I have seen some website's related posts widget also not working. So now we should move to Json feed. Hopefully by using Json feed i will release another widget soon.

Tankred Tecklenburg says: 12/03/2015

Perhaps Google fixes the problem, at least they say they are aware of it:

Tankred Tecklenburg says: 12/03/2015

Perhaps Google fixes the problem, at least they say they are aware of it:

BloggerSpice says: ADMIN 12/03/2015

Thanks for your info.. Actually after updating Google Blogger Platform there are several problem occurring. And google is working on it. I have also contact with Google they replied that they will overcome soon.

BloggerSpice says: ADMIN 12/04/2015

Hello Tankred.. This news ticker is smoothly working now. Google has fixed their server. Enjoy using the news ticker.

Tankred Tecklenburg says: 12/04/2015

Thanks for your attention. Your ticker is working again, Google fixed the issue.

Tankred Tecklenburg says: 12/04/2015
This comment has been removed by the author.
17 says: 1/24/2016

how to enable like thumbnail style that codes,
example this site latest apps news ticker

BloggerSpice says: ADMIN 1/25/2016

Hi Yellow.. that's the different concept. And build with complete jSON script. But this widget I have created with HTML and by using Blog default feed. I hope I will share a new news ticker very soon. Thank you.

17 says: 1/25/2016

Hi again, thank u for your answer and ı'm waiting new news ticker share :) have a good blogs...

BloggerSpice says: ADMIN 1/25/2016

Hi Laylaylom.. thanks for visiting and dropping your comment. Recently I am designing a website (Greek News site) for my client. So after completing that project I will share several news ticker soon.


17 says: 1/25/2016

Hi from turkey to you, Allah bless u Muhammed...

BloggerSpice says: ADMIN 1/26/2016

Ohh Great! I love Turkish people. They are very good. I am working with IHH Turkey (İHH İNSANİ YARDIM VAKFI) as a social worker with their partner agency.

17 says: 1/28/2016

Nice to hear them :) I'm happy for you, thank u again & have a good day at work..

MEDIALIVE says: 3/27/2016

This is resent post..? . how can display one selected label to this widget

BloggerSpice says: ADMIN 3/27/2016

Hi Medialive.. please find below code from HTML part.

now replace it with below code

now change the Label_Name with your Blog label. :up

Global Ads says: 6/10/2016

Hi mohammad as lot of people used your widget but i am unable to use your your widget my blog link is can you see the code and tell me how can i attach your widget. it looks great..:) help me

BloggerSpice says: ADMIN 6/10/2016

Hi Kush Khurana..I think problem evolve from duplicate JS file. please skip below file while you add this widget code in your template. I hope it will work.

<script src='' type='text/javascript'></script>

let me know can you make it work or not?

Unknown says: 8/10/2016

Good Evening my friend:
At first i really want to thank you a lot for these codes its exactly what i am looking for
so THANKS for your job
i have A question how can i change the news update bar & the word(news update) from left to right ??
and how change the bar fonts for bold & to this color #00A8D8 ???
this is my blog (

BloggerSpice says: ADMIN 8/11/2016

Hi Yasser,
You are using RTL version of Blogger template. So you have to change all "Left" with "Right". Just locate the below code in News ticker widget script...

<div style='float:left;padding:6px 10px 8px 4px;font:normal 100% Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;color:#FEFEFE;background-color:#000000;text-transform:none;'>
News Update : </div>
<div style='float:left;width:80%;padding:6px 4px; position:relative; overflow:hidden;'>

After That............................................

change "News Update" text according to your own words.
Change background-color:#000000; with #00A8D8; color code.
Change float:left with float:right

I hope it will solve your problem. :wr

Unknown says: 8/11/2016

Thanks a lot its work
i appreciate your amazing experience

Unknown says: 8/29/2016

Hello, thank you so much for this, i was looking everywhere TT but i have a question, by chance do you know what do we need to do to this code so the title can scroll down instead of just appearing? idk if i'm being clear lol

Zeemanuel says: 9/09/2016

Thanks for the widget... How can i increase the width of the widget? I want to make it 960px. Also how do i change the 'breaking News' to 'Updates'?
My blog:

BloggerSpice says: ADMIN 9/09/2016

Hi Emmanuel Ozigi
please locate the below code and replace 1005 with 960px.

.BSNews {background:#eeeeee;width:100%;

Again locate below text and change to "Updates"

News Update :


Unknown says: 9/09/2016

hello my friend
i just want to ask you how can i making column in the blogger hidden (ex:my blogger contain 2 columns that is had html codes inside it how can i make it hidden & do not appear for visitors just their action still) in the end of my blogger the code appear clearly

thanks a lot i really trust you because i previously Experimented your codes & it is amazing
so thank you
my blogger (

BloggerSpice says: ADMIN 9/11/2016

Hi Network Channel 2
you have added code like text. that's why it is appearing in your blog publicly. I think you have missed the whole advertisement script. Copy the script properly and add it in HTML widget. It won't be visible.

Unknown says: 9/15/2016

hey i applied your widget on my site but its not work....i did already remove the java script code !! i did not get the actual problem plz help me thnx in advanced :)

BloggerSpice says: ADMIN 9/20/2016

Hi Rohit,

Have you replace "bloggerspice" with your Blog URL from the below line?


and another thing if your template containing any updated or same JS file like below then remove one. Use only one JS file. I hope it will work now.

<script src='' type='text/javascript'></script>

BLOG - Andrie Kristianto says: 9/28/2016

How to make a box that can copy and paste as shown in the arrow that how? and it says " Double click to select anda Ctrl+c to copy"

BloggerSpice says: ADMIN 9/28/2016

Hi Andrie Kristianto, I will write the tutorial soon. :wr

Unknown says: 11/10/2016

Bro i can not find <div class='main/ or extra 2 code what can i do now??

BloggerSpice says: ADMIN 11/10/2016

Hi Mehedi, Your template coding is little different. Please find the below code and place the script above those code.

<div id='pagenbt'>
<div class='contentnbt'>

It will work now. Thanks :up

Unknown says: 11/16/2016

i can not find..please help me
your code bro

BloggerSpice says: ADMIN 11/16/2016

Hi Mehedi Hasan ,

use Ctrl+F in "Edit HTML" for searching the <div class='contentnbt'> code.
You will find it easily.

Unknown says: 11/16/2016

Many Many tnx bro....R u from Bangladesh??

BloggerSpice says: ADMIN 11/17/2016

Yes I am from Bangladesh. ;)

Unknown says: 11/18/2016

Vai amr ei blog a tricks ta kaj korce na kno bujte parci na...

BloggerSpice says: ADMIN 11/18/2016

Hi Mehedi Hasan,
Your new template's code is customized. So Please add the widget code above of below code line. It will work.

<div id='content-wrapper' itemscope='itemscope' itemtype='' role='main'>


Unknown says: 11/18/2016

bro if you don't mind....plz give me your contact number...

Unknown says: 11/18/2016

where i put this code??

Unknown says: 11/18/2016

please check my blog again
not working..

Unknown says: 11/18/2016

#content-wrapper {display:block;position:relative;overflow:hidden;padding:0;margin:60px auto 0 auto;}
function a ki kono problem ace??

Unknown says: 1/12/2017

Hello my friend
at first thanks a lot for your codes it is so benefit to my web
lately happened something wrong in these codes it was not publish any update in spite of i coustimized it
perfectly sine 4 months ago but now it is not work ???
p.s i had never changed anything or modified it !!!

BloggerSpice says: ADMIN 1/12/2017

Hi The Network Channel 2, This problem arises form Google jsapi. Google has brought many changes and maybe jsapi is not working for this widget. I will update this with new script. Till than you can use Json news ticker from below URL. :up

Unknown says: 2/03/2017

hi mohammad
is there a new updates for the news ticker html codes after google updates ??

BloggerSpice says: ADMIN 2/03/2017

Sorry buddy, currently I'm too much busy for creating blogger boot camp. Hopefully I will update soon. Just pray for me. Thank you. :)

Tankred 3/03/2017

Hi Rabbi, thanks mate for providing the code but I had to remove it now that it had stopped working for over a month.

BloggerSpice says: ADMIN 3/04/2017

Hi Tankred, please use Json ticker from below URL

Thank you. :)

Contact Form


Email *

Message *