Add Breaking News bar to your blogger sites

Breaking News is to be important for you if you want to show your recent blog posts one by one in the recent posts bar.If you add this ticker in your blog,you'll see your recent posts will be appered like one by one like javascript code.You can see the effects by add this ticker on your site by your own.So,let's start.

Step1: Go to your Blogger Dashboard. Template > Edit HTML and find </style>

Step2: Copy the below CSS Code and Past Before </style>

#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

Step3: Now Past the below javascript before </body> tag.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = '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: "YOUR URL HERE" edit the line with your blog url.

Step4: Now add the below HTML Code where you want show this breaking news ticker. You also add the below code on a HTML/Javascript Gadget.

<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<div style='clear: both;'/>

That's it. Now Save your template and refresh your page and see the result.If you have any problem to set this tool,you can comment below.I'll help you by my best.

Search tags:
Add Breaking News bar to your blogger sites,Add Breaking News widget to your blogspot sites, Add Breaking News ticker to your blogger sites,Add Breaking News to your blogger blogspot blogs.

• Tweet
• Share
• Share
• Share
• Share