How to add Breaking News Widget in your Blogspot Blog

Friend, in this post i am going to share a blogger breaking new widget, we will add a new tool and easy, this tool you view the latest news blog in the form of a horizontal to suit the templates blogger. I hope you like it

Step to ad breaking news widget
  • Step 1 : Adding to Template
  • 1) Loging and select your blog and then Go to Blogger Dashboard → Template → Edit HTML.
  • 2) Now Find the code </body> using [ctrl+F] (Use In HTML Box)
  • 3) Now Paste the Code Shown Below just Before it.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
$(document).ready(function () {
var url_blog = 'YOUR URL HERE', //replace with your Domain
    numpostx  = 10; //Posts want to display
    url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                     if (entry[i].link[j].rel == "alternate")
                            posturl = entry[i].link[j].href;
                }                posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
            skeleton += '</ul>';
            // kode untuk efek pada breaking news
            function tick(){
            $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#recentpostbreaking').html('<span>No result!</span>');
    error: function() {
            $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');

4) Customize your setting.Find any word click F3 or Ctrl+F.
Replace YOUR URL HERE with your site url past here.
5) Now Find the code </head> using [ctrl+F] (Use In HTML Box)
6) Now Paste the Code Shown Below just Before it.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#5F0000}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

7) Now save your template.
Step 2 : Add Widget to your blog
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.     

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<div style='clear: both;'/>

  5) Save your Widget.Don't forget to add the widget on the Center place.


  1. This is really nice blog article which gives us such a nice information and makes us updated, thanks for sharing.

    Breaking News Headlines | Breaking Sports News

  2. Extremely well examined and well presented. And thank you for all.
    For know extra about blogging, visit bellow site


Feature Article

Popular Posts

Recommended Article


Live cricket