How to Add a News Ticker to a Blogger Blog

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, is used by 90% of people who post. Because they get free Lifetime hosting and a free Subdomain 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?  

READ AlSO :  How to Installing Yoast SEO on a Blogger Blog

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 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'>
$(document).ready(function () {
var url_blog = 'PASTE 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>');

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 ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

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


How did you find this lesson on adding a breaking news ticker to a Blogger blog? Please just leave your feedback in the comment section below.

READ AlSO :  How I do Enable HTTPS on A Blogger Blog Having Custom Domain?

Usama Akram

Founder of and Publisher. He is a full-time Passionate Blogger. Interested in Technology, Blogging, Social Media, mobile packages

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button