Beautiful News Ticker widget for Blogger

How to add news ticker widget in Google blog

70
data:blog.title
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 http://www.bloggerspice.com */
.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;}

Customization

  • 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='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<!-- News Ticker -->
<script src='http://www.google.com/jsapi?key=AIzaSyDsllMIq0A98LUp2DP5SKBbXfBdTq_lAFE'></script>
<script type='text/javascript'>
//<![CDATA[
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;gfeedfetcher.call(this,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)}};
//]]>
</script>


  • 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='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' 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", "http://bloggerspice.com/feeds/posts/default") //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
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'></div>
</div>

Customization

  • 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 bloggerspice.com 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.
Beautiful News Ticker widget for Blogger
4 Stars stars - "Beautiful News Ticker widget for Blogger" News ticker concept evolve from online newspaper site. Basically it was used for quick view so...

Nice work bro :D

Thanks Aslam...for your feedback.

Ticker was great bro! Gud Job;)

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

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

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.

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

This comment has been removed by the author.
This comment has been removed by the author.

working fine thanx

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

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

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

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!

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!

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 www.maxigel.com.ar Thank you again!!

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

I have not idea the domain is that but i leave you a screen http://oi60.tinypic.com/t65kc8.jpg thanks mohammad!!

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

padding:6px 10px 8px 4px;


padding:6px 4px;

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

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

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

Sorry Bro working Properly On My site..

Nice to hear that..

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.

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.

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.

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

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?

https://developers.google.com/feed/terms?hl=en#deprecation-policy
https://productforums.google.com/forum/#!msg/blogger/pHMsmoqLXpY/7nJ2-4JHDAAJ

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.

Perhaps Google fixes the problem, at least they say they are aware of it: https://productforums.google.com/d/msg/blogger/CaC7HwWRheM/lxQ0axWnDAAJ

Perhaps Google fixes the problem, at least they say they are aware of it: https://productforums.google.com/d/msg/blogger/CaC7HwWRheM/lxQ0axWnDAAJ

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.

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

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

This comment has been removed by the author.

Hi,
how to enable like thumbnail style that codes,
example this site latest apps news ticker
http://www.karan.mobi/

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.

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

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.

;)

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

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.

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

HI
This is resent post..? . how can display one selected label to this widget
www.media1programs.com

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

http://bloggerspice.com/feeds/posts/default

now replace it with below code

http://bloggerspice.com/feeds/posts/default/-/Label_Name

now change the Label_Name with your Blog label. :up

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

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='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

let me know can you make it work or not?

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 (http://www.thenetworkch2pc.com.nu)

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

Thanks a lot its work
i appreciate your amazing experience

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

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: http://www.learnxlr.com

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 :


:sp

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 (http://thenetworkch2pc.blogspot.com)

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.

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

Hi Rohit,

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

http://bloggerspice.com/feeds/posts/default

:t

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='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

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" https://3.bp.blogspot.com/-a_V1UMhbWHw/V-ssotQQO9I/AAAAAAAAAzY/vjcM7gRc0zIApFuNinh-Xw1nX-wkH47PwCLcB/s1600/cara%2Bmembuat%2Bini%2Bbagaimana%2Bya.png

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

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

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


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

Hi Mehedi Hasan ,

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

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

Yes I am from Bangladesh. ;)

Vai amr ei blog a tricks ta kaj korce na kno bujte parci na...
http://bloggingrtrick.blogspot.com/

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='http://schema.org/Blog' role='main'>

;)

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

where i put this code??

please check my blog again
https://bloggingtrick.blogspot.com
not working..

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *