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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

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.

Bài viết: Hướng dẫn code Ajax Breaking New cho blogger được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Ajax Blog