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

byAdmin • • 2 min read
1
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
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!
4.94 / 169 rates

1 Nhận xét

Đăng nhận xét
Mới hơn Cũ hơn