Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Hướng dẫn code Ajax Breaking New cho blogger

5 min read
Bài viết này mình Hướng dẫn code Ajax Breaking New cho blogger phù hợp làm mục tin Hot, trending, bài viết mới, bài viết theo danh mục nhãn.

Hướng dẫn code Ajax Breaking New cho blogger

Demo

Breaking News

Các bước cài đặt đoạn code Ajax Breaking New cho blogspot như sau:


Bước 1: Các bạn thêm CSS trước thẻ đóng </b:skin>


#breakingnews{clear:both;width:100%;margin:20px 0 0;height:42px;line-height:29px;overflow:hidden;border-bottom:2px solid #fc4f3f}
#breakingnews .breakhead{position:absolute;background:none repeat scroll 0 0 #fc4f3f;color:#fff;display:block;float:left;font-family:'Roboto Condensed';font-size:16px;text-transform:uppercase;padding:6.5px 22px}
#adbreakingnews li a{font-weight:400;color:#444;margin-top:10px;transition:all 0.5s ease-in-out}
#adbreakingnews li a:hover{color:#444;text-decoration:underline}
#adbreakingnews{float:left;margin-left:175px;margin-top:6px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0 0 0 10px;;padding:0}

Bước 2: Thêm đoạn HTML vào vị trí cần hiển thị


<div id='breakingnews'>
  <span class='breakhead'>Breaking News</span>
  <div id='adbreakingnews'>Loading...</div>
</div>


Bước 3: Đặt đoạn code Ajax này trước thẻ đóng </body>


<script>
  //<![CDATA[
  $(document).ready(function() {
    $.ajax({
      url: "/feeds/posts/default",
      type: "get",
      data: {
        alt: "json",
        "max-results": 5
      },
      dataType: "jsonp",
      success: function(e) {
        function t() {
          $("#adbreakingnews li:first").slideUp(function() {
            $(this).appendTo($("#adbreakingnews ul")).slideDown()
          })
        }
        var a = e.feed.entry;
        if (void 0 !== a) {
          var 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) {
                var n = a[l].link[o].href;
                break
              } r = a[l].title.$t, s += '<li><a href="' + n + '">' + r + "</a></li>"
          }
          s += "</ul>", $("#adbreakingnews").html(s), setInterval(function() {
            t()
          }, 5e3)
        } else $("#adbreakingnews").html("<span>Không có bài viết nào!</span>")
      },
      error: function() {
        $("#adbreakingnews").html("<strong>Lỗi load Feed!</strong>")
      }
    })
  });
  //]]>
</script>

Trong đó:

"max-results": 5 nghĩa là chỉ hiển thị 5 bài viết mới nhất
url: "/feeds/posts/default" lấy bài viết gần đây, để lấy theo nhãn các bạn sửa như sau

url: "/feeds/posts/default/-/TÊN NHÃN"

5e3 = 5000 = 5 giây chuyển bài, các bạn có thể tùy chỉnh.

Như vậy là xong bài hướng dẫn code Ajax Breaking New cho blogger, nếu bạn cần hỗ trợ, giúp đỡ hãy comment dưới bài viết này.

Các bạn có thể căn chỉnh lại CSS cho phù hợp với Template blogspot của bạn đang dùng.

You may like these posts

  • Bài viết này mình Hướng dẫn Phân trang bài viết blogspot, cách phân trang số thứ tự Blogger, Phân trang trong Blogger Page Navigation.  Cách tạo phân trang cho …
  • Bài viết này mình hướng dẫn các bạn cách Trì hoãn tải thư viện ADS Google Adsense, để tăng tốc độ load trang, giúp tăng điểm PageSpeed Insights, tăng điểm Lighthouse.Nếu …
  • Sau đây mình hướng dẫn xóa đường viền khung comment blogger, mà nhiều bạn có thể không thích nó, và tìm đủ mọi cách như viết CSS cũng không thể loại bỏ nó.Bài viết này chỉ áp …
  • Chào tất cả các bạn, một tuần qua mình bận việc trong bệnh viện rất nhiều bạn / khách hàng nhắn tin mua template blogspot, do công việc nên mình không có bán được.Nay mình sẽ khuyế…
  • Bài này mình hướng dẫn các bạn tạo một trang download nhiều get link cho blogspot, bài trước Tạo trang download get link cho blogspot các bạn có thể xem lại.Thời gian chờ…
  • Mẫu Template blogspot được yêu thích nhất đó chính là Ant Green Template, với phiên bản Ajax tính tới hiện tại ngày 8/9/2021 đã bán ra là 17 lần, không tính số lượng bản cũ đã…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More