How to Add News Ticker on Blogger Site

Hello guys, we all know that blogging has become very trending and popular in today’s time, with the help of which you can earn well. For today’s blogging, the popular platform that has become popular is Google Blogger and the other is WordPress.

Google Blogger is the Most Popular and Free Platform, with the help you can share your knowledge for free. 90% of People use Google blogger. Because they provide Free hosting and free Blogspot Subdomain for a lifetime.

If you’re planning to create your first blogger website. You have most Welcome! Blogger generally Provides free Templates, but They are Simpler and You can’t customize your templates. Some Websites are provided Blogger Templates, where you can use for Free version but the Pro version is also available. You can check these sites.

If You are Setup your Blogger site and Changed your Custom themes. But you are ready to add new features to the custom blogger site. One of the most popular features is News Ticker. Yes friends, today I will show you through this article how you can add a news ticker to your blogger site.

Click this link to see more of our Blogger Customization related tutorials.

Setup News Ticker on Blogger

STEP 1: First of all, Open your Google blogger dashboard and Click on Theme >> Then Click on Edit HTML.

  • Save
  • Save

STEP 2: Then Opening your Theme Editor and Press on CTRL+F (Find) and type on </body> and copy this code. Then replace your Site URL. Paste the code to after the </body> section.

find-body-tag
  • Save
Paste the Code Like this
<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>

STEP 3: The Copy the 2nd HTML Code in below and Paste the code after <head> Section.

<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: Then Click on Layout. Click on Add a Gadget on the theme Centre Line. Choose the HTML /Javascript and paste this code 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;'/>
Add a Gadget
  • Save

Finally Finished your mission and You have Successfully Add a News Ticker on blogger Template for free

If you have facing any issue to related this Post, freely comment us to below this post.

Add News Ticker on Blogger for free
  • Save

Leave a Comment

0 Shares
Share via
Copy link
Powered by Social Snap