Add Breaking News Widget for Blogger 2020

Breaking News Widget: Breaking News widget is very useful to the News Blogs and even Niche blogs because new users who have visited the site from the Google may only see the information what they need and they will not return to the home page for more information. So at that time, this breaking news widget will be very useful to the users. It will show the total post titles which you wrote in your blog.

In this Way, You will get the use of User Engagement as well the best User Experience. As we all know that the User Experience and User Engagement playing an important role in the new updates of Google. The Implementation is quite easy and simple. This Breaking News Widget for Blogger will help you to drive some more Traffic for Free.  So follow according to the below process.

Breaking News Widget

How to Add Breaking News Widget for Blogger

Just follow according to the steps and install these Breaking New Html Codes in your blogger website. This Headline News widget for blogger will be more helpful and best to use it. Just go through the below process carefully.

Benefits & Features of Breaking News Widget for Blogger:

As I told you above there are many useful features by adding a breaking news widget for websites or blogs. We will provide you with some awesome benefits and features which you get by adding it.

  • Best Designs to Attract Users
  • Fully customized Code without any issues.
  • Makes the User Most Engaged.
  • Decrease the Bounce Rate
  • The Time spent by the User will be Increased
  • Best way to Show Other Blog Articles to the Users.

There are many such useful features by adding the widget breaking news to blogger. Now, let’s check with the main process.

Steps to Add Breaking News Widget for Blogger:

Steps will be Easy enough to do. Just search for the terms and you are good to go.
So these are the steps to follow
Step 1) Go to the Blogger Dashboard.
Step 2) Then  ..>>Template..>>Edit Template.
Step 3) Search for </body>
Step 4) Copy and Paste the below code before </body>

Paste This Code

<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>’);







Customization: Replace “Your Url Here” with your blog URL.
Step 5) Search for </head>
Step 6) Copy and Paste the below code before </head>
Paste This Code

<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}



Step 7) Now go ..>>Layout..>>Add a Gadget.
Step 8) Paste the below code in the Gadget.

Paste This code

<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;’/>

Step 9) Save the Gadget.

Note: Don’t forget to add the widget to the Center place. 

This is How we need to Add Breaking News Widget to Blogger in 2019. This would be the Best process to add the breaking news widget in an easy way.

These are the Recommendations giving by a Basictricks to the Bloggers to develop themselves by the below Articles.


Hence, This is the way how to add the Breaking News widget to the Blogger. Hope you have learned all the process of adding the breaking news widget to blogger blog without any issue or problems. If you face any issues regarding the Breaking News Widget feel free to the ask the doubt in the comment Section. We will help you out. Like us and Share the article with your blogger friends. Stay Tunned to Basictrick for More Tutorials on Blogger.


  1. karl brown May 6, 2015 Reply
  2. sp calvin May 6, 2015 Reply
  3. Stephen Djes May 17, 2015 Reply
  4. Stephen Djes May 17, 2015 Reply
  5. M Asif June 23, 2015 Reply
  6. BENJAMIN TOSIN June 26, 2015 Reply
  7. nishant mankotia September 25, 2015 Reply
  8. nuwan prasanna November 4, 2015 Reply
  9. Tushar Nagpal January 12, 2016 Reply
  10. A. JAV Lob February 20, 2016 Reply
  11. Aqshal Fauzan February 26, 2016 Reply
  12. Antonio Nugroho February 28, 2016 Reply
  13. PaijoKun April 6, 2016 Reply
  14. PARVEJ ALAM April 28, 2016 Reply
  15. Online Oodagam May 10, 2016 Reply
  16. zeeshan juni June 10, 2016 Reply
  17. Muazzam Ibrahim August 6, 2016 Reply
  18. Mahendra Singh February 2, 2018 Reply
    • Basictricks February 7, 2018 Reply
  19. Mahesh February 4, 2018 Reply
    • Basictricks February 7, 2018 Reply

Leave a Reply