Hướng Dẫn Hiển Thị Bài Viết Theo Nhãn Trên Blogger Chuẩn SEO (Có Ảnh, Tóm Tắt)

Bạn đang xây dựng một trang blog trên nền tảng Blogger (Blogspot) và muốn hiển thị các bài viết phân loại theo từng chủ đề (nhãn/label)? Bài viết này sẽ giúp bạn hiển thị bài viết theo nhãn một cách chuyên nghiệp, có hình ảnh đại diện, tiêu đề và đoạn tóm tắt. Rất phù hợp cho các trang chia sẻ tài liệu, blog giáo dục, tin học, công nghệ…

✅ Tính năng nổi bật:

Hiển thị tiêu đề + thumbnail + mô tả ngắn.
Giao diện đẹp, responsive, dễ tích hợp.
Dữ liệu hiển thị theo nhãn (label) tùy chọn.
Dễ tùy biến số lượng bài viết, độ dài mô tả...

📌 Bước 1: Thêm HTML khung hiển thị

Chèn đoạn HTML sau vào vị trí bạn muốn hiển thị bài viết:

<h2 class="heading-de-on">📘 PYTHON</h2>
<div id="python"></div>

<h2 class="heading-de-on">📘 HTML</h2>
<div id="html"></div>

<!-- Thêm nhãn khác tùy ý -->

🎨 Bước 2: CSS làm đẹp danh sách bài viết

Chèn đoạn CSS vào giữa thẻ <style> trong trang của bạn:

.heading-de-on {
  font-size: 20px;
  font-weight: 600;
  color: #3f3f3f;
  border-left: 4px solid #3f51b5;
  background-color: #f1f4ff;
  padding: 10px 15px;
  margin: 20px 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.label_with_thumbs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.label_with_thumbs li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.label_thumb {
  width: 55px;
  height: 55px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #eee;
}

.label_with_thumbs strong {
  font-size: 16px;
}

.label_with_thumbs a {
  text-decoration: none;
  color: #333;
}

.label_with_thumbs a:hover {
  text-decoration: underline;
}

💡 Bước 3: Script hiển thị bài viết từ nguồn RSS

Dán đoạn script JavaScript sau trước thẻ </body> hoặc tại cuối nội dung HTML:

<script>
  var numposts = 3;
  var showpostthumbnails = true;
  var showpostsummary = true;
  var numchars = 80;

  function renderLabel(json, containerId) {
    let container = document.getElementById(containerId);
    if (!container) return;

    let html = '<ul class="label_with_thumbs">';
    let total = json.feed.entry.length;
    let limit = Math.min(numposts, total);

    for (let i = 0; i < limit; i++) {
      let entry = json.feed.entry[i];
      let posttitle = entry.title.$t;
      let posturl = entry.link.find(link => link.rel === 'alternate').href;

      let thumburl = '';
      try {
        thumburl = entry.media$thumbnail.url;
      } catch {
        let s = entry.content.$t;
        let imgMatch = s.match(/<img[^>]+src="([^">]+)"/);
        thumburl = imgMatch ? imgMatch[1] : 'https://blogger.googleusercontent.com/img/b/default-thumbnail.jpg';
      }

      let postcontent = entry.content?.$t || entry.summary?.$t || '';
      postcontent = postcontent.replace(/<[^>]*>/g, "").substring(0, numchars) + "...";

      html += `
        <li>
          ${showpostthumbnails ? `<a href="${posturl}" target="_top"><img class="label_thumb" src="${thumburl}" alt="${posttitle}"/></a>` : ''}
          <div>
            <strong><a href="${posturl}" target="_top">${posttitle}</a></strong><br>
            ${showpostsummary ? postcontent : ''}
          </div>
        </li>`;
    }

    html += '</ul>';
    container.innerHTML = html;
  }

  // Callback cho từng nhãn
  function callbackPython(json) { renderLabel(json, "python"); }
  function callbackHTML(json) { renderLabel(json, "html"); }
</script>

🔗 Bước 4: Gọi nguồn bài viết từ Blogger

Chèn các dòng sau để gọi dữ liệu từ nhãn:


<script src="/feeds/posts/default/-/Python?orderby=updated&alt=json-in-script&callback=callbackPython"></script>
<script src="/feeds/posts/default/-/html?orderby=updated&alt=json-in-script&callback=callbackHTML"></script>

⚠️ Lưu ý: Mỗi callback phải có tên khác nhau để tránh bị ghi đè hàm.

🚀 Kết luận

Việc hiển thị bài viết theo label Blogger giúp blog của bạn trở nên chuyên nghiệp, dễ quản lý và chuẩn SEO hơn. Với vài dòng code JavaScript kết hợp HTML/CSS như trên, bạn có thể nâng cấp giao diện blog cực kỳ dễ dàng!

Hướng Dẫn Hiển Thị Bài Viết Theo Nhãn Trên Blogger Chuẩn SEO (Có Ảnh, Tóm Tắt)