How To Add Breaking News Ticker On Blogger/Blogspot

Breaking News Ticker widget for blogger - is a most important and popular tool for the blogger. Especially News base blog's must have a breaking news ticker on their website. Today I share the exclusive topic. Adding this widget, you can easily show your latest or recent posts one by one. This widget helps you to show recent posts as a ticker. In this tutorial, i will show you, how to add automated breaking news ticker for blogger. Every WordPress Ian can add latest posts ticker by adding some WordPress plugins easily. But every blogger users need to do it by adding some code manually. In this post, I shared a beautiful breaking news ticker for Blogspot blog.

The news ticker is a simple and better way to show latest posts one by one. By using a breaking news ticker in blogger, you can easily present your posts on visitors eye. 
Where you place it? Some webmasters like to show breaking news ticker on top of a page and under of navigation menu. if you willing to add this breaking news ticker on your blog, then firstly choice the place where you want to put it. I recommended you choice the place top of a page of under of navigation menu. These places are editor's choice.

Here are simple steps to adding this awesome animated jquery breaking news ticker for Blogspot blogger blog.

Read More- 

HOW TO MAKE E-MAIL SUBSCRIBE WIDGET FOR BLOGGER 

HOW TO ADD POP-UP FEEDBURNER SUBSCRIPTION WIDGET ON BLOGGER BLOGS

HOW TO USE DUAL SIM & SD CARD SIMULTANEOUSLY IN HYBRID SLOT

HOW TO ADD POPUP E-MAIL SUBSCRIPTION BOX ON BLOGGER/BLOGSPOT USING MAILMUNCH

I hope it will be helpful to all bloggers. Okay now, let's start the topic.

Step1: Go to your Blogger Dashboard. Template > Edit HTML and find </style>

Step2: Copy the below CSS Code and Past Before </style>

/*========================== CSS Breaking News by Trickzbuzz==========================*/
#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:35%;float:left;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {float:left;margin-left:60px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#breakingnews .breakhead {position:absolute;display:block;float:left;font-size:11px;font-weight:700;text-transform:uppercase;padding: 2px 6px;}

Step3: Now Past the below javascript before </body> tag.

<script type='text/javascript'>
//<![CDATA[
// Breaking News by trickzbuzz.blogspot.in
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Step4: Now add the below HTML Code where you want to show this breaking news ticker. You also add the below code on an HTML/Javascript Gadget.

<div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Latest</span>
<div id='adbreakingnews'>Loading...</div></div>
<div style='clear: both;'/>

You can change the CSS to make this widget more perfect for your blog.

That's it. Now Save your template and refresh your page and see the change. 

If you found any problem then just inform me on a Comment section. Thanks...