Hướng dẫn tạo Breaking News cho Blogger 2021

Breaking News là mục nó sẽ hiện tất cả những bài viết mới mà bạn vừa update lên Blog của mình, nó có nhiều dạng chuyển động và tùy biến đơn giản. Breaking News giúp người đọc có thể biết được các bài viết mà không cần lăn chuột

Nói đơn giản thì Breaking News nó là nơi cập nhật tin tức bài viết mới. Vậy làm sao để có thể thêm Breaking News vào Blogspot của bạn. Bài viết này sẽ hướng dẫn chi tiết để bạn có thể làm một cách đơn giản nhất.

Hướng dẫn tạo Breaking News cho Blogger 2020

Bước 1. Đăng nhập vào Blogger – Chủ đề – Chỉnh sửa HTML ,  Tìm thẻ ]]></b:skin> hoặc </style> đây là thẻ chứa CSS của blog. Copy và dán đoạn code dưới vào trên nó.

 #bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://www.voztheme.xyz",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news 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>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Bạn thay link https://www.voztheme.xyz bằng link website của bạn nhé.

Bước 3: Tìm vị trí đặt cho Breaking News. Bạn có thể đặt code phía dưới menu trong blog của mình. Copy đoạn code bên dưới vào vị trí mà bạn muốn đặt.

 <div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>

Vì code Request đến Font Awesome nên bạn có thể thay thế icon to đỏ trong code trên bằng icon khác mà bạn thích hoặc dùng svg. Lưu ý là trong blog của bạn phải add thư viện Font Awesome vào nhé. Bạn có thể tham khảo đường link bên dưới.

https://fortawesome.github.io/Font-Awesome/icons/%C2%A0

Chú ý: Nếu bạn muốn code chỉ hiển thị ở trang chủ thì bạn có thể thay code ở bước 3 bằng code bên dưới nhé. Phần code này tôi đã thêm thẻ điều kiện vào.

 <b:if cond='data:blog.pageType == "index"'>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>

Done. chỉ đơn giản vậy thôi, các bạn cứ làm theo các bước trên là bạn có thể tạo cho mình Breaking News mới và nhìn khá đẹp mắt. Chúc bạn thành công nhé.

CÁC BẠN CÓ THỂ XEM DEMO: TẠI ĐÂY