Hướng Dẫn Tạo "Breaking News" Widget cho Blogger

Khi bạn vào một site với chủ đề về tin tức bạn thường thấy một vài tin quan trọng được các site đặt lên đầu với các title như Breaking News hay Tiêu điểm.và thường thì các tin này được tạo 1 hiệu ứng là chuyển lên hoặc chuyển xuống rất thu hút sự chú ý của người đọc.Và đó cũng là một cách để giúp site tăng thêm lượt đọc cho các bài viết.Bạn có muốn Blog của mình cũng làm được như thế? Okie,Hôm nay,Blogger4t sẽ hướng dẫn từng bước để các bạn thực hiện

Các bước thực hiện

Bước 1: Xác định cấu trúc HTML.cái này rất quan trọng bởi vì bạn sẻ xác định Nó được đặt ở đâu trong Blog của bạn.ví dụ như trên phần đầu của Blog hay trên tiêu đề của mỗi bài viết
Dưới đây là một ví dụ cho Breaking News được đặt trên site tin tuc 24h là dưới phần Header và trên phần Main content

Bước 2: Xác định Nó được hiển thị khi nào
ví dụ bạn chỉ muốn nó hiện thị khi xem chi tiết bài viết,chỉ hiện thị trên trang chủ,hoặc hiện thị khi đó không phải là một bài viết chi tiết.
như DEMO ở trên site tin tuc tintuc.tv chỉ cho phép nó hiện thị khi không phải là bài viết chi tiết thì sử dụng CODE sau

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

Bước 3: Sử dụng Jquery để tạo hiệu ứng ,đặt CODE này trước thẻ </body>

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.tintuc.tv/', // thay bằng Domain của bạn
    numpostx  = 10; // số bài viết muốn hiện thị
$.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>

Bước 4 : Trang trí cho Breaking News sử dụng CSS.Thêm đoạn CSS sau trước thẻ đóng </head>

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

Bước 5: Thay

 var url_blog = 'http://www.tintuc.tv/', //

Thành Link Blog của bạn
Bây giờ ,lưu Templates lại và xin chúc mừng.Blog của bạn đã có Breaking News
 Xem Live Demo tại tintuc.tv

LIVE DEMO