How To Add Breaking News Live Ticker in Blogger [Best Trick] in 2021

Hello friends! Welcome to your Onlinewebbeast.com blog. So in this article today, we are going to discuss about How To Add Breaking News Ticker in Blogger in 2021. So we will know all these things in this article.o read the complete Article and Add a Latest Breaking News ticket in Blogger Template and get Breaking News Html code.

How to Add Breaking News Live Ticket | Breaking News Html code in 2021

How To Add Breaking News Live Ticker in Blogger Template-{Latest 2020}

Looking for Breaking News Ticker in Blogger Template?

So friends nowadays people want to start blogging. Because they too have started feeling that there is a lot of scope in blogging. And from this, we can earn a lot of money without the boss's tension. So let me tell you that if you do blogging, nowadays, two platforms are the most famous.

Why Breaking News is Important

The first is Blogger and the second is WordPress. So 90% of the people who are doing new blogging use Blogger.com. Because they get this Lifetime free hosting along with Lifetime free SubdomainSo when all this work is completed. So people use Blogger Template to customize their website.

So nowadays Blogger template is also becoming very high quality. By the way, we get a free template from Blogger. But it is not in our minds. So we use the Custom Design Blogger Template in this situation. So now a new feature is seen in Breaking News of Ticker.

So let me tell you that this is a type of Blogger Widget which is below the Template's Main Menu. But many older templates do not have this feature. So how can we add this feature to any template? Learn about it in detail.

Steps to Add Breaking News Ticker in Blogger

So now we try to know how we can add this blogger widget to our or any blogger template. So I have told the step by step below. So just like I told you, you have to follow the steps. So that you can add this News Ticker Widget to your template without any problems.

How to Add Breaking News HTML code in your Site

Step 1 - First of all log into your Blogger Dashboard and go to Theme and click on Edit Theme.

Step 2 - Now you have to search </body> by clicking CTRL + F. And copy all the Javascript in the box below. And </ Body> Tag above to save by Paste |
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'PASTE YOUR URL HERE', //replace with your Domain 
    numpostx  = 10; //Posts want to display
$.ajax({
    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;
                            break;
                         }
                }                posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#recentpostbreaking').html(skeleton);
            // 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>');
       }
});
});
//]]>
</script>

Note: - In the code given above, you have to paste the URL of your blog.PASTE YOUR URL HERE
Step 3 - Now you have to search </head> by clicking CTRL + F. And copy the code given below and paste it on the </head> tag.
<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{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
Step 4 - Now you have to go to Layout and add to Gadget and click on HTML / Javascript to copy and paste the code given below.
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
  </b:if></b:if>
<div style='clear: both;'/>

Conclusion on Blogger News

How did you like this article of How to Add Breaking News Ticker in Blogger Template. If you want to comment in the comment box below, or if you want to give some kind of suggestion, then you can share your opinion with us in the comment box below.
Previous Post Next Post
close