Hướng dẫn tạo tiện ích Breaking New cho Blogger

Tiện ích Breaking New là tiện ích khá phổ biến ở các trang báo chí, tin tức... được dùng để hiển thị các bài viết mới trên Blog. Có thể thấy, tiện ích này có tính năng khá giống với tiện ích Recent Post mình đã giới thiệu nhưng có ít tính năng, giao diện đơn giản hơn.

Bước 1 : Thêm đoạn CSS dưới đây vào phía trên thẻ ]]></b:skin>

#breaking-new {display: block;float: left;height: 40px;line-height: 20px;overflow: hidden;width: 100%;border:1px solid #e3e3e3;}
.breaking-new-title {background: #66cc99; color: #fff;display: block;float: left; font: bold 12px/22px;padding: 9px;position: absolute;}
#breaking-new-post {float: left; margin-left: 100px;}
#breaking-new-post ul,
#breaking-new-post li {list-style: none; margin: 0; padding: 0;}
#breaking-new-post li {height:40px;}
#breaking-new-post li a {background: none !important;color: #333 !important;font: bold 12px/22px;text-decoration: none;line-height:40px;display:block;}

Bước 2 : Thêm đoạn Script vào trên thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var url_blog = 'http://simplefastseo-nt.blogspot.com', // Replace With your Blog Url
    numpostx = 20; // Maximum Post
  $.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>';
        $('#breaking-new-post').html(skeleton);
        function tick() {
          $('#breaking-new-post li:first').slideUp(function() {
            $(this).appendTo($('#breaking-new-post ul')).slideDown();
          });
        }
        setInterval(function() {
          tick()
        }, 5000);
      } else {
        $('#breaking-new-post').html('<span>No result!</span>');
      }
    },
    error: function() {
      $('#breaking-new-post').html('<strong>Error Loading Feed!</strong>');
    }
  });
});
//]]>
</script>

Thay http://simplefastseo-nt.blogspot.com bằng link blog của bạn

Bước 3 : Thêm đoạn code này vào vị trí muốn hiển thị Breaking New

<div id='breaking-new'><span class='breaking-new-title'>Latest Post</span>
<div id='breaking-new-post'>Loading...</div>
</div>

Bước 4 : Save Template

Chúc các bạn thành công