How to add the Breaking News in blogger
Today Some many people are doing blogger,blogging is the most popular in the world,In the blogger how can you add the braking news widget in blogger Template.
1.Go to the blogger Dashboard
2.Go to Template
3.Click on Edit HTML
4.Now Press the CRTL+F button on your keyboard
5.In the Search bar Type the </body>
6.Copy the below code and past the above the body,Replace your Website URL
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<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>
</b:if></b:if>
|
7.Press CRTL+F
8.In Search bar type the </head>
9.Copy the below code and past the below the head,Replace your Website URL
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<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>
</b:if></b:if>
|
10.Save your Template
STEP-2
1)Go to Blogger Dashboard
2)Choose Layout
3)Select the Page Elements
4.Add a HTML/JavaScript Gadget
5.Past the below code.
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<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;'/>
|
6.Save the HTML page
7.Now view your blog enjoy the Braking Now widget.
No comments:
Post a Comment