Chào các bạn, đã lâu rồi mình chưa viết thêm bài nào về thủ thuật Blogspot. Buổi sáng hôm nay mình rảnh nên ngồi tranh thủ viết cái bài chia sẻ các bạn thanh Breaking News này.
Để xem demo các bạn có thể xem ở trang này
Tao thanh bai viet ngau nhien chuyen nghiep cho blogspot
Tạo thanh bài viết ngẫu nhiên chuyên nghiệp cho blogspot


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

Bước 1: Chèn đoạn JS sau vào trước </body> hoặc sau <body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://stc-01.blogspot.com/",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
Bước 2: Chèn đoạn code sau vào nơi muốn hiển thị.
<style>
#breakingnews {height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div><br/></b:if>
 Bước 3: Lưu template.

Lời Kết

Chỉ vài bước đơn giản trên là các bạn có thể thêm vào website của mình một thanh bài viết nổi bật chuyên nghiệp rồi, và tùy vào những sáng tạo của các bạn để có thể tùy biến nó thêm đẹp hơn, chuyên nghiệp và độc hơn nữa.
Chúc các bạn thành công!

CHIA SẺ BÀI VIẾT

- - 43 bình luận
CHUYÊN MỤC

BÌNH LUẬN (43)

  1. hay quá bác thấy bài viết trên Phú Cường Blogger là vào cmt liền hihe

    Trả lờiXóa
    Trả lời
    1. Oh nhanh thế ^^ Cảm ơn Hưng Star - IT nha ♥♥

      Xóa
  2. Cái này quen lắm cơ mà hình như ở temp Bảo Share (Dị Nô) phải không anh

    Trả lờiXóa
  3. mọe cái demo còn để link rút gọn + thiếu target -_-

    Trả lờiXóa
  4. đẹp đó mà cái demo đẻ link rút gọn thì không thể chấp nhận đc vợ ạ :v

    Trả lờiXóa
    Trả lời
    1. Muốn xem tận mắt thì phải chịu khó chút để có thu nhập cho thằng admin chứ :v

      Xóa
  5. Cho em hỏi nhé :v ? Anh dùng font awesome phiên bản cũ là link nào vậy ?

    Trả lờiXóa
  6. em đã đặt liên kết cho anh rồi nha ^^

    Trả lờiXóa
  7. e cũng làm rồi nhưng nó ko chạy a ơi.

    Trả lờiXóa
  8. Template này dễ nhìn hơn hẳn luôn ý

    Trả lờiXóa
    Trả lời
    1. Bởi vì thế nên anh mới đổi lại nè haha.

      Xóa
  9. Bác thông cảm em đang thi nên ko có time tương tác vs bác đc

    Trả lờiXóa
    Trả lời
    1. Okay, lúc chiều định xóa liên kết mà thấy lúc trước có comment thường xuyên nên để lại vậy :))

      Xóa
    2. tuẩn này mới thi xong nên bác thông cảm nhé

      Xóa
  10. Á đù sao lại dùng cái template này từ năm chống Pháp thế anh.

    Trả lờiXóa
    Trả lời
    1. Không phải xấu mà là sao tự nhiên quay lại tận version này anh

      Xóa
    2. Anh thay một số chổ mà, chứ đâu phải theme cũ hoàn toàn ?

      Xóa
    3. Ây da thí chủ nói thiệt chứ hả

      Xóa
    4. Nhiều thật mà, thử để ý đi :v

      Xóa
  11. Anh nên đổi 1 số mã màu không trùng với Blog anh đi >< nhìn nhiều màu loạn.
    VD: Nút share ở đầu trang chủ bài viết.

    Trả lờiXóa