[Widget] Simple Breaking News Cho Blogger - Blogspot

Nếu các bạn là người thường hay đọc tin tức trên mạng thì chắc chắn không thể không thấy Widget Breaking News - Đó là một Widget gồm các bài viết chạy ngang qua Thông thường nó sẻ chứa những bài nổi bật, những bài viết mới mà người xem chắc chắn không thể bỏ qua. Vì vậy hôm nay mình sẽ hướng dẫn các bạn tạo một Breaking News đơn giản cho các bạn mới học.

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Mục Đích

Nó sẽ giúp người xem trang sẽ ở lại lâu hơn bởi những tin tức nóng hổi, nổi bật nhất
Với hiệu ứng load rất sinh động sẽ thu hút nhiều người đọc blog mình hơn
Tăng lượt view Blogger
Tạo cho bloggsot đep hơn, nhất là đối với các blog tin tức.

Thực Hiện

1. Đầu tiên các bạn sao chép đoạn CSS sau và dán nó vào trước thẻ ]]></b:skin> hoặc thẻ </style>

CSS /* 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;}}

2. Tiếp tục các bạn sao chép đoạn javascript sau vào trước thẻ </body>

JS<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://vnitworld.net",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>

Chú ý: các bạn thay chữ màu cam: http://vnitworld.net thành link của blog bạn nha

3. Sau đó các bạn tiếp tục chép đoạn html sau rồi dán nó vào sau thẻ mở <body> hoặc trước thẻ đóng </body>.

HTML<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>

Chú ý: Nếu các bạn chỉ muốn nó hiện thị trên trang chủ còn khi đọc bài viết thì biến mất, các bạn thay vì dán đoạn html trên, các bạn thay bằng đoạn html sau:

HTML<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>

Demo
click to view

Nâng Cao

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.

Simple Breaking News Cho Blogger - Blogspot

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Nguyễn Đăng Hậu

0 nhận xét:

Xem Nhiều

Chuyên Mục

Bình Luận

Simple Breaking News Cho Blogger - Blogspot

Bài liên quan

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Nguyễn Đăng Hậu

Bài Viết Liên Quan

0 nhận xét: