Thảo Luận

×Close

Tạo thanh bài viết ngẫu nhiên chuyên nghiệp cho blogspot

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!

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

43 nhận xét
Hiển thị
  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. Để thử xem sao

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

    Trả lờiXóa
  5. đẹp ghê à good good good!!!

    Trả lờiXóa
  6. đẹ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
    2. 123link hả mậy @_@

      Xóa
  7. Này gọi là Breaking News :)

    Trả lờiXóa
  8. 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
  9. em đã đặt liên kết cho anh rồi nha ^^

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

    Trả lờiXóa
  11. 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
  12. 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
  13. Á đù 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
  14. sao dạo anh không ra bài

    Trả lờiXóa
  15. 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
Mới hơn Cũ hơn