Tạo Breaking News Widget Gọn Nhẹ Cho Blogspot

Tạo Breaking News Widget

Breaking News Widget: Breaking News Widget rất hữu ích cho các Blog Tin tức vì những người dùng mới đã truy cập trang web từ Google có thể chỉ thấy thông tin họ cần và họ sẽ không quay lại trang chủ để biết thêm thông tin. Vì vậy khi đó Breaking News Widget này sẽ rất hữu ích với người dùng. Nó sẽ hiển thị tổng số tiêu đề bài đăng mà bạn đã viết trong blog của mình.

Lợi ích & Tính năng của Breaking News Widget Gọn Nhẹ Cho Blogspot:

  • Thiết kế đẹp nhất để thu hút người dùng
  • Mã tùy chỉnh hoàn toàn mà không có bất kỳ vấn đề nào.
  • Khiến người dùng tham gia nhiều nhất.
  • Giảm tỷ lệ thoát
  • Thời gian của Người dùng sẽ được Tăng lên
  • Cách tốt nhất để hiển thị các bài viết blog khác cho người dùng.

Các bước để thêm Breaking News Widget Gọn Nhẹ Cho Blogspot:

1. Đăng nhập vào Blogger
2. Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML
3. Tìm thẻ </head> và dán đoạn CSS dưới vào trên nó
<style type=”text/css”>
/* Breaking News TL */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>
4. Sau đó thêm đoạn JavaScript dưới vào trên thẻ </body>
<script type=”text/javascript”>
//<![CDATA[
// Breaking News TL
$(document).ready(function(){var e=”https://www.nguyenlamblog.xyz/”,t=10;$.ajax({url:””+e+”/feeds/posts/default?alt=json-in-script&amp;max-results=”+t,type:”get”,dataType:”jsonp”,success:function(e){function t(){$(“#recentbreaking li:first”).slideUp(function(){$(this).appendTo($(“#recentbreaking ul”)).slideDown()})}var n,r,a=””,i=e.feed.entry;if(void 0!==i){a=”<ul>”;for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if(“alternate”==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class=”fa fa-check-square”></i><a href=”‘+n+'” target=”_blank”>’+r+”</a></li>”}a+=”</ul>”,$(“#recentbreaking”)(a),setInterval(function(){t()},5e3)}else $(“#recentbreaking”)(“<span>There nothing here?</span>”)},error:function(){$(“#recentbreaking”)(“<strong>Error Loading Feed!</strong>”)}})});
//]]>
</script>
Thay đổi nguyenlamblog.xyz bằng địa chỉ blog của bạn và thay thế số 10 theo số lượng bài viết bạn muốn hiển thị.
5. Cuối cùng bạn hãy lưu đoạn mã bên dưới vào nơi muốn hiển thị. Nhưng phải ở trong <body> và </body> nhé.
<div id=’breakingwrapper’>
   <div id=’breakingnews’>
     <span class=”tulisbreaking”>News Update<span class=”breakhidden”/></span>
      <div id=’recentbreaking’>Loading…</div>
      <div class=”blog-date”>
         <script language=”Javascript”>
            var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class=”clear”/>
Hoàn tất, giờ hãy ấn Lưu chủ đề và vào blog của bạn xem kết quả nhé :V
Hi vọng bài viết Tạo Breaking News Widget Gọn Nhẹ Cho Blogspot hữu ích với bạn. Đừng quên comment để nêu cảm nghĩ nhé.
naminakiky

———————————–


Leave a Reply