Step by step instructions to add breaking news ticker in blogger format 2021
Step by step instructions to add breaking news ticker in blogger format. Step by step instructions to add news ticker in any blogger topic. Custom news ticker for blogger 2021.
It doesn't make any difference whether your site is in Blogger or in WordPress. There isn't a lot of distinction between these two. Just in WordPress, you get heaps of modules to do ACO. Furthermore, in Blogger you need to do SEO with your own hands through coding.
Yet, breaking news ticker is something like this that assuming you put it in your WordPress site or blogger site, the excellence of your site increments further. Simultaneously, Also, the breaking news sticker likewise draws in more guests to your site towards the post of your site.
In this way, today we know how we will actually want to add the breaking news sticker inside the bloggers topic that we use in our bloggers site.
How to add breaking news ticker in blogger template 2021
Step 1: At First go to theme option and edit HTML. Like this photo.
Step 2: Single click on html codes, and find (ctrl+f) </body>. Like this Photo
Step 3: Paste the code up this </body> tag. Code bellow…
___________________code 1__________________
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'ENTER YOUR SITE 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 4: Change this (PASTE YOUR URL HERE) and give your website URL
Step 5: Find this tag </head>. And please paste the codes up this tag… Codes Bellow..
____________________code 2______________________
<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 6: Now paste this code where you can show your Breaking news ticker
___________________code 3_____________________
<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-->
<div style='clear: both;'/>
0 Comments