Code widget Random Post (bài viết ngẫu nhiên) cho Blogspot

Thực chất nó là một widget Random Post (bài đăng ngẫu nhiên) khá đơn giản mà ít người quan tâm. Ở bài viết này thời điểm hiện tại mình đã cập nhật lại code mới, tối ưu lại tốc độ load cũng như là hiển thị đẹp hơn. Anh em quan tâm có thể sử dụng code thử nhé!

Code widget Random Post (bài viết ngẫu nhiên) cho Blogspot

Hướng dẫn

Các bạn vào Bố cục > Add widget HTML/Javascript hoặc đặt bất cứ chỗ nào bạn thích rồi chèn đoạn code dưới này vào là xong:

<style>
#random-posts {
  list-style-type:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px; /* khoảng cách giữa các bài */
}

#random-posts li {
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.08);
  transition:transform .2s, box-shadow .2s;
}

#random-posts li:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

#random-posts img {
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
  margin-right:12px;
  transition:opacity .3s;
}

#random-posts img:hover {
  opacity:0.8;
}

#random-posts div {
  flex:1;
}

#random-posts a {
  font-size:16px;
  font-weight:600;
  color:#333;
  text-decoration:none;
  line-height:1.4;
}

#random-posts a:hover {
  color:#0077cc;
  text-decoration:underline;
}

.random-summary {
  font-size:13px;
  color:#666;
  margin-top:4px;
  display:block !important;
}
</style>

<ul id="random-posts"></ul>

<script type="text/javascript">
// Config
var randomposts_number   = 6;
var randomposts_chars    = 110;
var randomposts_details  = 'no';

// Fisher–Yates shuffle
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// Render random posts
function random_posts(json) {
  if (!json.feed.entry) return;
  var entries = shuffle(json.feed.entry.slice());
  var html = "";

  for (var i = 0; i < Math.min(randomposts_number, entries.length); i++) {
    var entry = entries[i];
    var title = entry.title.$t;

    var snippet = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t : "");
    snippet = snippet.replace(/<[^>]*>/g, "");
    if (snippet.length > randomposts_chars) {
      snippet = snippet.substring(0, randomposts_chars);
      snippet = snippet.substring(0, snippet.lastIndexOf(" ")) + "…";
    }

    var url = "#", thumb = "https://i.imgur.com/9bVLdjR.jpeg";
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == "alternate") url = entry.link[j].href;
    }
    if (entry.media$thumbnail) thumb = entry.media$thumbnail.url;

    var date = entry.published ? entry.published.$t.substring(0,10) : "";

    html += `
      <li>
        <a href="${url}" rel="nofollow">
          <img src="${thumb}" alt="${title}" loading="lazy"/>
        </a>
        <div>
          <a href="${url}" rel="nofollow">${title}</a>
          ${randomposts_details=="yes" ? `<div style="font-size:12px;color:#999;margin-top:2px">${date}</div>` : ""}
          <span class="random-summary">${snippet}</span>
        </div>
      </li>`;
  }

  document.getElementById("random-posts").innerHTML = html;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&max-results=20&callback=random_posts" defer></script>
  

Lời kết

Đơn giản thế thôi, hy vọng bạn sẽ thích nó. Có thể chỉnh sửa CSS và một vài thông số ở code để phù hợp với Blog của bạn. Chúc bạn thành công!