How To Add Breaking News Ticker in Blogger Template

Thank you for reading this post. Don't forget to subscribe!

Hello friends! Welcome to your Techly360 blog. So in today’s article, we will talk about How To Add Breaking News Ticker in Blogger Template. And Ye Blogger me Breaking News Ticker Kaise Lagaye Sakte hai. So we will know all these things in this article. So stay tuned in this article and know in full detail.

Table of Contents

Breaking News Ticker in Blogger Template?

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

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

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

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

Steps to Add Breaking News Ticker in Blogger

So now let us know how we can add this blogger’s widget to our own or any blogger template. So I have told below step by step. So you have to follow the steps exactly as I have told you. So that you can add this News Ticker Widget to your template without any problems.

Step 1 – First, log in to your blogger dashboard, 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 save it by pasting it above the </body> tag.

<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 above code, instead of PASTE YOUR URL HERE, you have to paste the URL of your blog.

Step 3 – Now you have to search </head> by clicking CTRL+F. And copy the code given below and paste it above 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 and copy and paste the code given below.

<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-->
  </b:if></b:if>
<div style='clear: both;'/>