Add Breaking News Ticker For Blogger

Breaking News Ticker widget for blogger - is a most important and popular tool for blogger. Specially News base blog's must have a breaking news ticker on their website. Today i am share the exclusive tropic. Adding this widget, you can easily shown your latest or recent posts one by one. This widget is help 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 wordpressian 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.

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. 

Code updated: 20/11/2015

Where you place it? Some webmasters like to show breaking news ticker on top of 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 page of under of navigation menu. These place are editor's choice.

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

I hope it will be helpful all bloggers. Okay now lets start the tropic.

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 msdesignbd==========================*/
#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 msdesignbd.com
$(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>

Code updated: 20/11/2015

Step4: Now add the below HTML Code where you want show this breaking news ticker. You also add the below code on a 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 Comment section. Thanks...