Tạo Breaking News cho BlogSpot – Blogger
Tạo Breaking News cho BlogSpot sẽ giúp cho người đọc dễ dàng cập nhật những bài viết gần đây trên blog của bạn. Đó cũng là cơ hội để họ ghé lại blog của bạn lâu hơn. Mình đã thử ngay chính với Blog Kim Anh của mình và đã thành công. Hôm nay mình chia sẻ cách làm này, mong rằng nó sẽ giúp ích cho các bạn.
Các bạn thực hiện theo hướng dẫn dưới đây
1. Thêm HTML
- Đăng nhập vào Blogger.
- Các bạn vào Mẫu – Edit HTML – Tìm thẻ </body>
- Dán code dưới vào trên nó.
- Thay YOUR URL HERE thành địa chỉ blog của bạn.
<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>2. Thêm Scrip
- Tìm thẻ </head>
- Dán code dưới vào trên nó.
<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>3. Thêm Widget
- Vào Bố cục.
- Thêm tiện ích – Thêm tiện ích – HTML/Javascrip.
- Dán code dưới vào.
<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;'/>Trên đây là hướng dẫn Tạo Breaking News cho BlogSpot – Blogger của mình.
Lưu ý khi thêm widget các bạn nên thêm ở vị trí phía trên Bài viết (dưới header). Theo mình đây là vị trí thích hợp nhất trên blog để người dùng dễ quan sát nhất.
Chúc các bạn thành công!!!
