Add Reponsive Breaking News for Blogger

 Breaking News tiếng anh tạm dịch là tin tức mới nóng hỏi đang diễn ra 24h qua. Nếu các bạn đã từng xem trên Tivi báo đài thì không xa lạ gì với thuật ngữ này. Trên màn hình sẽ có một dòng chữ chạy với tên là Breaking News tiếp sau đó là những bài tin tức nổi bật chạy theo trông tất bát mắt. Trong bài viết hôm nay thuthuat.xyz sẽ hướng dẫn các bạn cách Breaking News cho trang blogspot.

Now to add Reponsive Breaking New to Blogger

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng ]]></b:skin>

/* CSS Breaking News */

#breakingnews {margin:15px 0 0 0;margin-right:15px;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;}} 

Bước 2: Tìm thẻ đóng </body>  sau đó copy toàn bộ đoạn code bên dưới dán vào phía trên nó

<script type='text/javascript'>

//<![CDATA[

// Breaking News

$(document).ready(function(){var e="https://it269.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> 

Thay thế link :  https://it269.blogspot.com thành địa chỉ trang web của blog bạn

Bước 3: Tìm nơi đặt code để hiển thị thanh breaking news thường thì chúng ta hay đặt nó trên cùng hay ở dưới phần header. Như trong blog của mình thì đặt dưới header.

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>

<div id='adbreakingnews'>Loading...</div></div>

Tùy chỉnh code bằng cách thêm vào thẻ điều kiện chỉ hiển thị trên trang chủ thì bạn dùng đoạn code bên dưới nhé

 <b:if cond='data:blog.pageType == &quot;index&quot;'>

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>

<div id='adbreakingnews'>Loading...</div></div>

</b:if>

 Thế là xong khá là đơn giản phải không phần còn lại là bạn ra trang chủ xem nó hiển thị như thế nào. Do mỗi template có cấu trúc khác nhau về bố cục cũng như CSS nên bạn tùy chình sao cho code phù hợp là được nhé. Chú ý cần phải có thư viện jquery để code chạy nhé.