Elevate Your Blogger Site with Our News Ticker Widget!

Boost engagement on your Blogger site using our sleek News Ticker widget. Effortlessly showcase your latest updates with style and simplicity.

Introducing our exquisite News Ticker Widget, meticulously designed to elevate the visual appeal of your Blogger site. This elegant feature seamlessly integrates into your blog, offering a sophisticated and dynamic way to present your latest updates. With a sleek and modern design, our News Ticker Widget ensures that your breaking news or latest posts are showcased prominently, catching the eyes of your audience.

Elevate Your Blogger Site with Our News Ticker Widget!

The concept of the news ticker has evolved from online newspaper sites, originally designed for a quick overview of breaking news. What was once exclusively used on news platforms has now become a prominent feature in the blogging landscape, extending beyond news-focused blogs to include a variety of personal and professional niches. This represents a contemporary trend on the blogging platform.

Key Features:

  1. Sleek Design: Our News Ticker Widget boasts a sleek and modern design, ensuring that it complements the aesthetic of your blog seamlessly.
  2. Customizable Styles: Tailor the widget to match your blog's theme with customizable styles. Choose from a range of fonts, colors, and animation options to create a personalized look.
  3. User-Friendly Installation: Installing our News Ticker Widget is a breeze. No coding expertise required! Follow our simple step-by-step guide, and you'll have this eye-catching feature up and running in no time.
  4. Real-time Updates: Keep your audience informed with real-time updates. As you publish new posts, the News Ticker automatically reflects the latest content along with publishing dates.
  5. Responsive Design: Our widget is designed to adapt seamlessly to various screen sizes, ensuring an optimal viewing experience for your visitors, whether they're on desktop or mobile devices.

Elevate your blogging experience with our Beautiful News Ticker Widget. Enhance the aesthetics of your site while keeping your audience engaged with the latest happenings. Download and install now to take your Blogger site to the next level!


The integration of news tickers is notably observed in premium themes, where it has become an integral component of the overall design. Many developers and widget builders have crafted codes that not only function effectively but also present an aesthetically appealing outlook.

While news tickers were initially unavailable for Google Blogger, they have gained widespread popularity among users. Considering its significance, I recommend incorporating this widget into your blog, as it serves as an important tool to showcase your latest posts or news. By doing so, your blog becomes more user-friendly, providing visitors with a convenient way to stay updated on your content.


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

Step 2: Go to your Theme -> 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 theme button. And check your template to see the effect.

I trust that you have seamlessly incorporated the Latest News widget into your blog. This straightforward ticker will automatically showcase the link to your most recent post along with its publishing date whenever you publish new content. While this serves as a fundamental and uncomplicated news ticker, I am optimistic about developing more advanced features for it in the near future.

If you encounter any challenges while installing this widget, please don't hesitate to reach out. Feel free to leave a comment below, and I'll be more than happy to assist you. Your feedback and engagement are highly valued, and I look forward to enhancing your experience with the evolving features of our news ticker.

Go Up