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

LongAnIT 10/31/2018
Create Breaking News cho Blogger

Breaking News là gì ? Gọi chung là những tin nóng mới cập nhật, bài viết mới cập nhật. Các bạn hay theo dõi tin tức thời sự trên Tivi sẽ thấy một thanh dòng chữ chạy ngang từ trái sang ghi những thông tin cập nhật. Việc tạo  Breaking News sẽ giúp cho người đọc dễ dàng cập nhật những bài viết gần đây trên blog của bạn. Đó cũng là cơ hội để họ ghé lại blog của bạn lâu hơn.

Hôm nay tôi sẽ chia sẻ cho các bạn cách tạo Breaking News rất đơn giản và đặc biệt là nó có thể Reponsive trên các thiết bị. Vui lòng thực hiện theo các bước hướng dẫn dưới đây

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.longanit.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(){$("#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ướ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. 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 == &quot;index&quot;'>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>

Kết luận: Như vây chỉ vài thao tác đơn giản tôi đã hướng dẫn các bạn cách tạo Breaking News Widget cho blog của bạn . Chúc thành công và đừng quên chia sẻ hặc để lại comments của bạn bên dưới nhé.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây