Banner

Tạo widget bài viết đề xuất random posts đơn giản chỉ với vài dòng code

Hướng dẫn tạo widget hiển thị các bài đăng ngẫu nhiên random posts widget cho blogspot bằng phương pháp sử dụng ajax get url blog trực tiếp


Khi đề cấp đến tiện ích các bài viết ngẫu nhiên random posts widget là nghĩ ngay đến phương pháp get url nguồn cấp lấy dữ liệu hiển thị. Nếu dùng phương pháp get này rất chậm và code lại dài dòng, thay vào đó chuyển qua phương pháp get url trực tiếp của blog vì ưu điểm thời gian get nhanh, không lệ thuộc vào nguồn cấp và code cũng gọn hơn.

Tuy nhiên nhược điểm của phương pháp này cần tìm kiếm element chính của mỗi post cụ thể khi get url tìm class chính của mỗi post.

Tạo widget bài viết đề xuất random posts đơn giản chỉ với vài dòng code
Hình minh họa các post có class ".post" hiển thị trong widget Blog

Một điểm rất quan trọng cần lưu ý khi sử dụng phương pháp này đó là các bài đăng bắt buộc phải có thẻ ngắt nhảy "<!--more-->" thì khi get url mới lấy được tổng số post chính xác. Cho nên nếu Blog bạn đã có  có thẻ ngắt nhảy "<!--more-->" của mỗi bài đăng thì hãy làm còn không nếu vẫn áp dụng phải sửa lại bài đăng thêm dấu ngắt nhảy bên dưới vài dòng mở đầu bài đăng.

Phương pháp thực hiện cũng đơn giản thôi, thêm mới một widget HTML/JavaScript trong Bố cục tiện ích và chèn code script trong nội dung của tiện ích là xong, lưu ý theme cần có thư viện link jquery đề sử dụng phương pháp get ajax.

<script>
$.get('/search?max-results=200', function(e) { // Thay 200 bằng số post tối đa cần get
  var a = $(e).find('.Blog .post'), // element của post
    p = ''
  if (a.length) {
    var b = a.length,
      n = [],
      r = 10, // Số bài hiển thị
      c = document.querySelector('#HTML1>.widget-content') // Thay HTML1 bằng id của tiện ích
    if (a.length < r) r = a.length
    for (var i = 0; i < r; i++) {
      n.push(Math.floor(Math.random() * b))
    }
    n.forEach(function(i) {
      p += '<article class="post">'
      p += $(a[i]).html()
      p += '</article>'
      c.innerHTML = p
    })
  }
})
</script>

Hình minh họa

Tạo widget bài viết đề xuất random posts đơn giản chỉ với vài dòng code


Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Liên hệ Zalo