Hướng dẫn tạo Breaking News (Tin giật gân) đơn giản cho Blogspot

huong dan tao breaking news tin giat gan don gian cho blogspot

Đây là một tiện ích rất có ích dành cho những trang chuyên viết về tin tức hoặc đơn giản là bạn muốn cho người đọc biết rằng hiện nay bạn đang có những bài viết nào mới mà bạn muốn họ đọc.

Chỉ với thủ thuật tạo Breaking News (nghĩa là Tin giật gân hoặc Tin nóng hổi) đơn giản kèm theo hiệu ứng sinh động này sẽ giúp cho trang của bạn trở nên chuyên nghiệp hơn, giúp cho người đọc ở lại trang của bạn lâu hơn từ đó tăng được mức độ uy tín trang của bạn hơn.

Bạn có thể thủ thuật này hoạt động như thế nào ở ngay dưới đây!

HOT
Đang tải...

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Breaking News đơn giản với hiệu ứng đẹp

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã Javascript dưới đây rồi dán chúng vào giữa hai thẻ <body></body>, nhưng tốt nhất là nên đặt vào trước thẻ đóng </body>.

Ở trong đoạn Javascript này, bạn cần chú ý hai điểm dưới đầy:

  1. Hãy thay đường dẫn màu đỏ thành đường dẫn trang của bạn.
  2. Ngay sau đường dẫn là đoạn mã t=3, đây chính là số lượng bài được thay đổi trong Breaking News.

<script language='JavaScript' type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="http://socbayblogs.com",t=3;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#linknews li:first").slideUp(function(){$(this).appendTo($("#linknews 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>",$("#linknews").html(s),setInterval(function(){t()},5e3)}else $("#linknews").html("<span>Không có kết quả!</span>")},error:function(){$("#linknews").html("Lỗi tải bài viết mới!")}})});
//]]>
</script>

Bước 3. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>.

#breakingnews {overflow:hidden;background:#ff9;font-size:14px;width:100%;height:40px}
#hotnews {background:#f00;color:#fff;font-weight:700}
#linknews li {text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;padding:1px 0 10px 0!important}
#linknews li a {transition:all 0.5s ease-in-out}
#linknews, #hotnews {padding:6px 10px;float:left}
#linknews ul, #linknews li{list-style:none;margin:0;padding:0}

Bước 4. Nhấn vào nút Lưu chủ đề để hoàn tất.

Bây giờ, để thủ thuật này hiện thị hãy thêm đoạn mã HTML dưới đây vào nơi mà bạn muốn đặt.

<div id='breakingnews'>
<span id='hotnews'>HOT</span>
<div id='linknews'>Đang tải...</div>
</div>

Chúc bạn thành công!