How to Add a News Ticker to a Blogger Blog

Usama AkramAugust 11, 2022Last Updated: August 11, 2022

0 3 minutes read

Table of Contents

How to Add a News Ticker to a Blogger Blog

Hello, friends! This article will discuss how to add a breaking news ticker to your Blogger blog. And this is how to put a breaking news ticker on your Blogger blog. All of these details will be given in this post. So, if you want to learn more, keep reading this article.

Breaking News Ticker in Blogger Template?

Many persons nowadays want to start blogging. Because they have noticed that blogging has a great deal of potential. And we can make a lot of money blogging without having to deal with a boss. So if you want to start blogging, there really are two popular platforms available today. Blogger is the first, and WordPress is the second. As a result, Blogger.com is used by 90% of people who post. Because they get free Lifetime hosting and a free Subdomain blogname.blogspot.com for life. When all the work is finished, people customize their websites using the Free Blogger Template.

Blogger templates are also becoming increasingly high-quality these days. By the way, on many websites, we get a free template from Blogger. However, it is not in our minds to use the Custom Design Blogger Template in this situation to make it look great. Breaking News of Ticker is now a new feature in Blog.

This is a Blogger Plugin that appears below the Template Main Menu. Unfortunately, many older templates have this feature. So, how do we combine these features into any template?

Steps how to Add Breaking News Ticker in Blogger

Now we’re searching for a way to integrate this blogger widget into any blogger template. As a result, I have provided a step-by-step tutorial below. If you follow these steps, you will add this Breaking News Ticker Button to your template without a problem.

Step 1: Log in to your Blogger.com dashboard and go to Theme>> Edit. HTML can be changed. Step 2 – Now press CTRL + F and type /body> into the search box. Also, copy and paste all of the Javascript into the box below. Paste the code above the /body> tag and save the Theme.

<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, rather than PASTE YOUR URL HERE, you should paste the URL of your Blog.

Step 3 – Press CTRL + F once more and look for /head>. Also, copy the code and put 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 go to Layout >> Add to Gadget >> HTML / Javascript and paste the code 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;'/>