Chia sẻ mẫu Sitemap Page dạng Tab đẹp cho blogspot [Update 2025]

Bạn đang tìm một cách hiển thị toàn bộ bài viết trên Blogspot một cách đẹp mắt, dễ tìm kiếm và hiện đại? Trong bài viết này mình sẽ chia sẻ code Sitemap (Mục lục toàn site) cho Blogspot, với nhiều tính năng nâng cấp mới tiện ích.

Code Sitemap Page Blogspot Update.

Sitemap Page thường là một trang hoặc trang web chứa liên kết đến tất cả các bài đăng, trang, hoặc nội dung khác có trên trang web của bạn. Mục đích của Sitemap Page là tạo ra một trang tổng hợp, giúp người đọc hoặc các công cụ tìm kiếm dễ dàng tìm kiếm và truy cập nội dung trang web của bạn.

📌 Giới thiệu mẫu sitemap

Anh em làm Blogspot chắc hẳn đều biết đến phần Sitemap / Table of Content (mục lục toàn site).

Hôm nay mình chia sẻ code Sitemap phiên bản nâng cấp, có các tính năng:

• ✅ Hiển thị toàn bộ bài viết blog dưới dạng danh sách.
• ✅ Mặc định mở sẵn, không cần click để bung ra.
• ✅ Có lọc theo nhãn (Label) để xem bài viết theo từng chuyên mục.
• ✅ Có thanh tìm kiếm (Search box) để lọc bài viết theo tiêu đề.
• ✅ Bài viết mới trong vòng x ngày sẽ tự động gắn nhãn New.
• ✅ Giao diện dark mode hiện đại, animation mượt mà, không xung đột với code khác.

📷 Demo Sitemap

• Hộp màu tối, bo góc đẹp mắt.
• Dropdown chọn nhãn để lọc.
• Thanh tìm kiếm giúp tìm nhanh bài viết.
• Badge New nổi bật bên cạnh tiêu đề.

🚀 DEMO SITEMAP

💻 Code đầy đủ

Anh em chỉ cần copy toàn bộ đoạn code sau và dán vào HTML Mode trong Trang của Blogspot:

<div class="table-of-content" id="table-of-content">
  <div class="toc-header active">
    <span>📑 Danh mục Sitemap</span>
    <span class="toc-toggle">▼</span>
  </div>
  <div class="toc-body">
    <div class="toc-filter">
      <label for="toc-select">📂 Chọn chuyên mục:</label>
      <select id="toc-select">
        <option value="all">Tất cả</option>
      </select>
    </div>
    <div class="toc-search">
      <input type="text" id="toc-search" placeholder="🔍 Tìm bài viết...">
    </div>
    <p class="loading">⏳ Đang tải danh sách...</p>
    <ol class="toc-list"></ol>
  </div>
</div>
<style>
/* --- TOC BOX --- */
.table-of-content {
  background:#1e1e1e;
  color:#ddd;
  font-family:"Segoe UI", Tahoma, sans-serif;
  font-size:14px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
  margin:20px 0;
}
/* --- HEADER --- */
.toc-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#2c2c2c;
  padding:12px 16px;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  color:#fff;
  user-select:none;
  transition:background 0.3s;
}
.toc-header:hover { background:#3a3a3a; }
.toc-toggle { transition:transform 0.3s; }
.toc-header.active .toc-toggle { transform:rotate(180deg); }
/* --- BODY --- */
.toc-body { max-height:1200px; overflow:hidden; transition:max-height 0.5s ease; }
/* --- FILTER --- */
.toc-filter {
  padding:12px 16px;
  border-bottom:1px solid #333;
  background:#252525;
  font-size:13px;
}
.toc-filter label { margin-right:8px; color:#bbb; }
.toc-filter select {
  background:#1e1e1e;
  color:#fff;
  border:1px solid #444;
  padding:5px 10px;
  border-radius:6px;
}
/* --- SEARCH --- */
.toc-search {
  padding:12px 16px;
  border-bottom:1px solid #333;
  background:#1f1f1f;
}
.toc-search input {
  width:100%;
  padding:8px 12px;
  border-radius:6px;
  border:1px solid #444;
  background:#111;
  color:#eee;
  font-size:13px;
}
.toc-search input:focus {
  outline:none;
  border-color:#009fef;
}
/* --- LOADING --- */
.loading {
  padding:15px;
  font-style:italic;
  color:#aaa;
}
/* --- LIST --- */
.toc-list { margin:0; padding:0; list-style:none; }
.toc-list li {
  border-top:1px solid #333;
  padding:10px 16px;
  background:#1e1e1e;
  transition:background 0.3s;
}
.toc-list li:hover { background:#2a2a2a; }
.toc-list a {
  color:#ccc;
  text-decoration:none;
  display:block;
  font-size:14px;
  transition:color 0.3s;
}
.toc-list a:hover { color:#fff; }
/* NEW badge */
.toc-list .new-badge {
  background:#009fef;
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:6px;
  margin-left:8px;
}
</style>
<script>
const TOC_CONFIG = {
  url: "https://www.anhtrainang.com/", // đổi thành domain Blogspot của bạn
  containerId: "table-of-content",
  showNew: 10 // số ngày để gắn nhãn New
};
document.addEventListener("DOMContentLoaded", () => {
  const tocBox = document.getElementById(TOC_CONFIG.containerId);
  const header = tocBox.querySelector(".toc-header");
  const list = tocBox.querySelector(".toc-list");
  const loading = tocBox.querySelector(".loading");
  const select = tocBox.querySelector("#toc-select");
  const search = tocBox.querySelector("#toc-search");
  let allPosts = [];
  // Toggle open/close (nhưng mặc định mở sẵn)
  header.addEventListener("click", () => {
    header.classList.toggle("active");
    const body = tocBox.querySelector(".toc-body");
    if (header.classList.contains("active")) {
      body.style.maxHeight = "1200px";
    } else {
      body.style.maxHeight = "0";
    }
  });
  // Fetch Feed JSON
  fetch(`${TOC_CONFIG.url}/feeds/posts/summary?alt=json&max-results=9999`)
    .then(res => res.json())
    .then(data => {
      loading.style.display = "none";
      const entries = data.feed.entry || [];
      let labelsSet = new Set();
      entries.forEach(item => {
        const title = item.title.$t;
        const link = item.link.find(l => l.rel === "alternate").href;
        const published = new Date(item.published.$t);
        const labels = (item.category || []).map(c => c.term);
        allPosts.push({ title, link, published, labels });
        // gom labels để bỏ vào dropdown
        labels.forEach(l => labelsSet.add(l));
      });
      // Thêm labels vào select
      labelsSet.forEach(l => {
        const opt = document.createElement("option");
        opt.value = l;
        opt.textContent = l;
        select.appendChild(opt);
      });
      renderList("all", "");
    })
    .catch(() => {
      loading.textContent = "❌ Không tải được dữ liệu.";
    });
  // Render list theo filter + search
  function renderList(filter, keyword) {
    list.innerHTML = "";
    const now = new Date();
    allPosts
      .filter(post => filter === "all" || post.labels.includes(filter))
      .filter(post => post.title.toLowerCase().includes(keyword.toLowerCase()))
      .forEach(post => {
        const diffDays = Math.floor((now - post.published) / (1000*60*60*24));
        let li = document.createElement("li");
        let a = document.createElement("a");
        a.href = post.link;
        a.textContent = post.title;
        if (diffDays <= TOC_CONFIG.showNew) {
          let badge = document.createElement("span");
          badge.className = "new-badge";
          badge.textContent = "New";
          a.appendChild(badge);
        }
        li.appendChild(a);
        list.appendChild(li);
      });
  }
  // Khi chọn label trong select
  select.addEventListener("change", () => {
    renderList(select.value, search.value);
  });
  // Khi gõ vào ô search
  search.addEventListener("input", () => {
    renderList(select.value, search.value);
  });
});
</script>

Lưu ý: Nhớ đổi dòng https://www.anhtrainang.com/ 👉 thành domain blog của bạn.

✅ Một số lợi ích của Sitemap Page

1. Dễ dàng tìm kiếm: Người đọc và công cụ tìm kiếm có thể dễ dàng truy cập tất cả nội dung trang web của bạn từ một vị trí duy nhất.
2. Tối ưu hóa SEO: Các công cụ tìm kiếm có thể quét Sitemap Page để hiểu rõ cấu trúc trang web của bạn, giúp cải thiện chỉ mục hóa và xếp hạng trang web trên kết quả tìm kiếm.
3. Thuận tiện cho người quản trị: Bạn có thể sử dụng Sitemap Page như một công cụ quản lý để kiểm soát và theo dõi nội dung trang web của mình.

🎯 Kết luận

Với code này, Sitemap trên Blogspot sẽ chuyên nghiệp hơn nhiều:

• Người dùng dễ tìm bài viết theo nhãn hoặc tên.
• Giao diện dark mode, badge New nổi bật.
• Code nhẹ, không xung đột.