How to add breaking news ticker in blogger template 2022

How to add breaking news ticker in blogger template. Breaking news HTML code for blogger. How to add a news ticker in any blogger theme in Hindi. free news ticker script for blogger 2021. Super SEO theme.

How to add a news ticker in any blogger theme in Hindi. free news ticker script for blogger 2021. Super SEO theme.

It does not matter whether your website is in Blogger or in WordPress. There is not much difference between these two. Only in WordPress, do 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.

How to add breaking news ticker in blogger template
How to add breaking news ticker in blogger template

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.

Nowadays Blogger template is also becoming very high quality. By the way, we get a free template from Blogger. But it is not of our wish. So we use Custom Design Blogger Template in this situation. So now a new feature is seen in this Breaking News Ticker.

Let me tell you that this is a type of Blogger Widget which is below the main menu of the template. But many old templates do not have this feature. So how can we add this feature to any template? Will know about it in detail.

How to add breaking news ticker in blogger template 2022 | Breaking news HTML code for blogger

Now we try to find out how we can add this blogger’s widget to our or any blogger template. So I have told step by step below. So you have to follow the steps exactly as I have told you. So that you can add this News Ticker Widget to your template without any problems.

Step 1 – First of all log in to 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 save it by pasting it on the </body>tag.

<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 above code, instead of PASTE YOUR URL HERE, you have to paste the URL of your blog.

Step 3 – Now you have to search </head>by clicking CTRL+F. And copy the code given below and paste it onto 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 paste the code below where you want to put the breaking news ticker. If you do not have any widget in your Blogger Dashboard, then you can easily do the work by watching our YouTube videos.

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

Leave a Reply

Your email address will not be published.