How To Add Breaking News Ticker in Blogger Blog

Hello friends! Today in this article we are going to talk about Add Breaking News Ticker in Blogger Blog. And How To Add Breaking News Ticker in Blogger Blog. We will know all these things in detail to this article. So stay with this article to know in more detail.

Breaking News Ticker in Blogger Template?

Nowadays many people want to start blogging. Because they have started feeling that there is a lot of scope in blogging. And from blogging, we can earn a lot of money without the boss tension. If you have to start blogging, nowadays, two platforms are the most famous.


The first one is Blogger and the other is WordPress. So 90% of the people who are doing blogging use Blogger.com. Because they get Lifetime hosting in free along with Lifetime free Subdomain blogname.blogspot.com. When all the work is completed then People use Free Blogger Template to customize their website.

$ads={2}

Nowadays Blogger template is also becoming very high quality. By the way, we get a free template from Blogger on many websites. But it is not in our mind we use Custom Design Blogger Template in this situation to look awesome. Now a new feature is seen in Blog is Breaking News of Ticker.


This is a type of Blogger Widget which is below the Template 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.


Steps to Add Breaking News Ticker in Blogger

Now we try to find out how we can add this blogger widget to any blogger template. So I have told the step by step below. You have to follow these steps and you can add this Breaking News Ticker Widget to your template without any problems.


Step 1 - First of all log in to your Blogger.com Dashboard and go to Theme >> Edit HTML.

Step 2 - Now Press CTRL + F and then search for </body>. And copy all the Javascript code in the box below. Paste above of the </body> tag and click on save the theme icon.

$ads={2}
<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: - Instead of PASTE YOUR URL HERE in the above code, here you have to paste the URL of your blog.

 
Step 3 - Now again press CTRL + F and search for </head>. And copy the code given below and paste it on 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 >> add to Gadget >> HTML / Javascript to copy and paste the code given below.

$ads={2}
<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 about How To Add Breaking News Ticker in Blogger Blog? You must give us your feedback in the comment box below.






Close[x]