Hello friends! Welcome to your Cooling guruji blog. So in today's article we are going to talk about How To Add Breaking News Ticker in Blogger Template. And this blogger can me Breaking News Ticker Kaise Lagaye. So we will know all these things in this article. So stay tuned in this article and know in full details.



Breaking News Ticker in Blogger Template?


So friends nowadays people want to start blogging. Because they too have now 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 do blogging, then 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 the feature of Lifetime free Subdomain with this Lifetime free hosting. So when all this work is done. 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 of our wish. So we use Custom Design Blogger Template in this situation. So now a new feature is seen in this Breaking News Ticker.

So let me tell you that this is a type of Blogger Widget which is 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 know about it in detail.


Steps to Add Breaking News Ticker in Blogger

So let me tell you that this is a type of Blogger Widget which is 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 know about it in detail.


Step 1 – First of all log in to 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 save it by pasting it on 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 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 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;'/>
Conclusion – How did you like this article of How To Add Breaking News Ticker in Blogger Template. You must tell us by commenting in the comment box below. Or if you want to give any kind of suggestion, then you can share your opinion with us in the comment box below. can.