Breaking News Ticker widget for blogger - is a most important and popular tool for blogger. Specially News base blog's must have a breaking news ticker
on their website. Today i am share the exclusive tropic. Adding this
widget, you can easily shown your latest or recent posts one by one.
I hope it will be helpful all bloggers. Okay now lets start the tropic.
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 change. If you found any problem then just inform me on Comment section. Thanks...
EmoticonEmoticon