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
Để xem demo các bạn có thể xem ở trang này
 |
| 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'>Bước 2: Chèn đoạn code sau vào nơi muốn hiển thị.
//<![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>
<style>Bước 3: Lưu template.
#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>
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!
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óaOh nhanh thế ^^ Cảm ơn Hưng Star - IT nha ♥♥
XóaĐể thử xem sao
Trả lờiXóaHú hú :v thử đi bác :p
XóaCá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Đúng rồi em.
Xóamọe cái demo còn để link rút gọn + thiếu target -_-
Trả lờiXóaAhihi, bất cẩn quá :v để sửa lại.
XóaHay lắm <3
Trả lờiXóaCảm ơn em nha ^^
Xóađẹp ghê à good good good!!!
Trả lờiXóaCảm ơn Hồng Hải nha ♥♥
Xóanặng
Trả lờiXóaBình thường mà ?
Xóađẹp đó mà cái demo đẻ link rút gọn thì không thể chấp nhận đc vợ ạ :v
Trả lờiXóaMuố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óa123link hả mậy @_@
XóaHaha
Xóa1 ngày vui vẻ nhé anh!
Trả lờiXóaNày gọi là Breaking News :)
Trả lờiXóaÀ đúng rồi :v quên mất.
XóaCho em hỏi nhé :v ? Anh dùng font awesome phiên bản cũ là link nào vậy ?
Trả lờiXóaAnh không biết :))
Xóaem đã đặt liên kết cho anh rồi nha ^^
Trả lờiXóae cũng làm rồi nhưng nó ko chạy a ơi.
Trả lờiXóaTemplate này dễ nhìn hơn hẳn luôn ý
Trả lờiXóaBởi vì thế nên anh mới đổi lại nè haha.
XóaTemplate đẹp :3 <3
Trả lờiXóaThank You ♥♥♥
XóaBác thông cảm em đang thi nên ko có time tương tác vs bác đc
Trả lờiXóaOkay, 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óatuẩn này mới thi xong nên bác thông cảm nhé
XóaÁ đù sao lại dùng cái template này từ năm chống Pháp thế anh.
Trả lờiXóaHmm, Xấu à -_-
XóaKhông phải xấu mà là sao tự nhiên quay lại tận version này anh
XóaAnh thay một số chổ mà, chứ đâu phải theme cũ hoàn toàn ?
XóaÂy da thí chủ nói thiệt chứ hả
XóaNhiều thật mà, thử để ý đi :v
Xóasao dạo anh không ra bài
Trả lờiXóaĐệch -_- ra thường xuyên ấy chứ
XóaAnh 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.
Trả lờiXóaVD: Nút share ở đầu trang chủ bài viết.
Haha, thanks em nha! Anh sửa rồi ^^
Xóađẹp
Trả lờiXóa