Beautiful News Ticker widget for Blogger
How to add news ticker widget in Google blog
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.
77 comments
How can i change it Bro..
.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
https://developers.google.com/feed/terms?hl=en#deprecation-policy
https://productforums.google.com/forum/#!msg/blogger/pHMsmoqLXpY/7nJ2-4JHDAAJ
how to enable like thumbnail style that codes,
example this site latest apps news ticker
http://www.karan.mobi/
;)
This is resent post..? . how can display one selected label to this widget
www.media1programs.com
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
<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?
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)
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
My blog: http://www.learnxlr.com
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
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)
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.
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>
<div id='pagenbt'>
<div class='contentnbt'>
It will work now. Thanks :up
your code bro
use Ctrl+F in "Edit HTML" for searching the <div class='contentnbt'> code.
You will find it easily.
http://bloggingrtrick.blogspot.com/
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'>
;)
https://bloggingtrick.blogspot.com
not working..
function a ki kono problem ace??
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 !!!
(http://thenetworkch2pc.blogspot.com)
thanks
http://www.bloggerspice.com/2016/08/breaking-news-ticker-widget-for-blogger.html
is there a new updates for the news ticker html codes after google updates ??
thanks
http://www.bloggerspice.com/2016/08/breaking-news-ticker-widget-for-blogger.html
Thank you. :)