Thursday, July 29, 2021
HomeBloggingHow to add breaking news ticker in blogger template 2021

How to add breaking news ticker in blogger template 2021

How to add breaking news ticker in blogger template. How to add news ticker in any blogger theme. Custom news ticker for blogger 2021.

It does not matter whether your website is in Blogger or in WordPress. There is not much difference between these two. Only in WordPress, you get lots of plugins to do ACO. And in Blogger you have to do SEO with your own hands through coding.

But breaking news ticker is such a thing that if you put it in your WordPress website or blogger website, then the beauty of your website increases further. At the same time, Also, the breaking news sticker also attracts more visitors to your website towards the post of your website.

So, today we know how we will be able to add the breaking news sticker within the blogger’s theme that we use in our blogger’s website.

How to add breaking news ticker in blogger template 2021

Step 1: At First go to theme option and edit HTML. Like this photo.

Step 2: Single click on html codes, and find (ctrl+f) </body>. Like this Photo

Step 3: Paste the code up this </body> tag. Code bellow…

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

Step 4: Change this (PASTE YOUR URL HERE) and give your website URL

Step 5: Find this tag </head>. And please paste the codes up this tag… Codes Bellow..

<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 6: Now paste this code where you can show your Breaking news ticker

<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 to add breaking news ticker in blogger template 2021 video



Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

bernaldinobest 157943 on Create Device Mockups in Browser with DeviceMock