How To Add Breaking News Ticker in Blogger Template

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 tenson. So let me tell you that if you do blogging, nowadays, two platforms are the most famous.

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 Subdomain. So 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 free template from Blogger. But it is not in our mind. 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.

Full Video Tutorial

Steps to Add Breaking News Ticker in Blogger

So now we try to find out 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.

➤ Sitemap Generator for Blogger

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. Paste over the </body> tag and save it.

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

नोट :- 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 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><!-- 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;'/>