Add Breaking News Ticker For Blogger

Add Breaking News Ticker For Blogger

Add Breaking News Ticker Widget 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'>
// Breaking News by
$(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>")}})});

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...
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.


  1. সুবেল ভাই আমি সফল হতে পারলাম না। শ্তাইল তো অনেক গুলা আছে। আমি কি প্রথম স্টাইলের নিচে কোড বসাবো

  2. হে বসাই দেন।

  3. I follow all the steps but it's show "Loading...".

    1. URL format will be like

  4. nice tutorial bro, btw the breaking news still loading only on my homepage, how to fix it ?


    1. i was, but it still not show up on my homepage

    2. Make sure that your blog URL format is like that,

  5. I follow all the steps but it's show "Loading...".
    but its loading please help me

    1. Javascript isn't added before body tag on your blog.. Please follow all steps and do it.

  6. i follow u step but not working visit this site can u fix this how

  7. its loading ??? why i follow u step

  8. Hi, amazing post but i have the same problem, just shows Loading... why?

    my blog


  9. এইটা কাজ করে কিন্তু এইটা খবরের হেডলাইনে মত আসে না... নিচে নিচে আসে কেনো?

  10. Could you please put a detailed note on where the URL should be added and where are the places which we can edit. That will be much appreciated