How To Add Breaking News Ticker in Blogger Template

Hello Friends! Welcome to my blog. So in this article today we are going to talk about How To Add Breaking News Ticker in Blogger Template  . And this can be Blogger Breaking News Ticker. So we will know all these things in this article. So stay in this article and know more in full details.

Breaking News Ticker in Blogger Template?

So friends nowadays people want to start blogging. Because they too have started feeling that there is too much 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.

➤ Add Floating Ads in Blogger Sidebar

➤ Change Bullet Style in Blogger Template

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.

➤ Fix Breadcrumbs Error in Blogger

➤ Best Image Optimization Tool For Blogger

Full Video Tutorial

Steps to Add Breaking News Ticker in Blogger

So now we try to know how we can add this blogger widget to our blogger or any template. So below step by step. 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. And </ Body> Tag above to save by Paste |

<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, you have to paste the URL of your blog.PASTE YOUR URL HERE

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;'/>

Credit to https://techly360.com/how-to-add-breaking-news-ticker-in-blogger-template/