Hello friends! Welcome to your Onlinewebbeast.com blog. So in this article today, we are going to discuss How To Add Breaking News Ticker in Blogger in 2023. So we will know all these things in this article.o read the complete Article and Add the Latest Breaking News ticket in Blogger Template and get the Breaking News Html code.
How to Add Breaking News Live Ticket | Breaking News Html code in 2023
Looking for Breaking News Ticker in Blogger Template?
So friends nowadays people want to start blogging. Because they too have started feeling that there is a lot of scope in blogging. And from this, we can earn a lot of money without the boss's tension. So let me tell you that if you do blogging, nowadays, two platforms are the most famous.
Why Breaking News is Important
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.So nowadays Blogger template is also becoming very high quality. By the way, we get a free template from Blogger. But it is not in our minds. 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.
Steps to Add Breaking News Ticker in Blogger
So now we try to know how we can add this blogger widget to our or any blogger template. So I have told the step by step below. 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.
How to Add Breaking News HTML code in your Site
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 code given above, 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>
<div id='recentpostbreaking'>Loading...</div>
</b:if></b:if>
<div style='clear: both;'/>