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.

You may like these posts


  1. esobondhu
    Nice work bro :D
    • BloggerSpice
      Thanks Aslam...for your feedback.
  2. Unknown
    Ticker was great bro! Gud Job;)
    • BloggerSpice
      Thanks Dixit...long time no news!!!
  3. Kamera  Media
    i've changed the url with my blog url, but there the latest update doest show anything. can you help me please sir?
    • BloggerSpice
      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.
  4. সত্য মানব
    Excellent Tips For Blogger Site....Wait For Your Next Helpful Tips......Techtunesu
  5. Unknown
    This comment has been removed by the author.
  6. Unknown
    This comment has been removed by the author.
    • BloggerSpice
      I just checked your Blog.. News ticker is working perfectly.
  7. Unknown
    working fine thanx
  8. Unknown
    i want to add marquee function in this can u help me for this
    • BloggerSpice
      I will try to share it soon.. But Now I am working on another widget.
  9. Indian Defence News
    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!
  10. Indian Defence News
    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!
  11. Unknown
    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
      Hi Gelmer..your given domain name is not accessible. So please write the correct domain. Otherwise I can't give you the solution.
  12. Unknown
    Hi am getting your blog post notifications on my blog when i applied the above codes
    How can i change it Bro..
  13. Unknown
    Sorry Bro working Properly On My site..
    • BloggerSpice
      Nice to hear that..
  14. Tankred Tecklenburg
    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
      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.
  15. Tankred Tecklenburg
    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
      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
  16. Tankred Tecklenburg
    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
      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.
  17. Tankred Tecklenburg
    Perhaps Google fixes the problem, at least they say they are aware of it:
    • BloggerSpice
      Hello Tankred.. This news ticker is smoothly working now. Google has fixed their server. Enjoy using the news ticker.
  18. Tankred Tecklenburg
    Perhaps Google fixes the problem, at least they say they are aware of it:
    • BloggerSpice
      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.
  19. 17
    how to enable like thumbnail style that codes,
    example this site latest apps news ticker
    • BloggerSpice
      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.
  20. 17
    Hi again, thank u for your answer and ı'm waiting new news ticker share :) have a good blogs...
    • BloggerSpice
      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.

  21. 17
    Hi from turkey to you, Allah bless u Muhammed...
    • BloggerSpice
      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.
  22. 17
    Nice to hear them :) I'm happy for you, thank u again & have a good day at work..
    This is resent post..? . how can display one selected label to this widget
    • BloggerSpice
      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
  24. Global Ads
    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
      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?
  25. Unknown
    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
      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
  26. Unknown
    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
  27. Zeemanuel
    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
      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 :

  28. Unknown
    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
      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.
  29. Unknown
    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
      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>
  30. BLOG - Andrie Kristianto
    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
      Hi Andrie Kristianto, I will write the tutorial soon. :wr
  31. Unknown
    Bro i can not find <div class='main/ or extra 2 code what can i do now??
    • BloggerSpice
      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
  32. Unknown
    i can not find..please help me
    your code bro
    • BloggerSpice
      Hi Mehedi Hasan ,

      use Ctrl+F in "Edit HTML" for searching the <div class='contentnbt'> code.
      You will find it easily.
  33. Unknown
    Many Many tnx bro....R u from Bangladesh??
    • BloggerSpice
      Yes I am from Bangladesh. ;)
  34. Unknown
    Vai amr ei blog a tricks ta kaj korce na kno bujte parci na...
    • BloggerSpice
      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'>

  35. Unknown
    bro if you don't mind....plz give me your contact number...
  36. Unknown
    where i put this code??
  37. Unknown
    please check my blog again
    not working..
  38. Unknown
    #content-wrapper {display:block;position:relative;overflow:hidden;padding:0;margin:60px auto 0 auto;}
    function a ki kono problem ace??
  39. Unknown
    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
      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
  40. Unknown
    hi mohammad
    is there a new updates for the news ticker html codes after google updates ??
    • BloggerSpice
      Sorry buddy, currently I'm too much busy for creating blogger boot camp. Hopefully I will update soon. Just pray for me. Thank you. :)
  41. 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
      Hi Tankred, please use Json ticker from below URL

      Thank you. :)
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up