Hướng dẫn tạo Sitemap blogspot (Sơ đồ Blogger) mới nhất

Sitemap là một trang quan trọng để các đọc giả tìm hiểu tất cả các bài viết trên một blog. Sơ đồ Blogger cũng có thể được gọi là mục lục của tất cả các bài viết trên blog của chúng ta.

Bản thân Sitemap thường được sử dụng để giúp khách truy cập xem các bài viết hoặc bài đăng trên blog dễ dàng hơn. Về bản chất, tất cả các bài viết sẽ được hiển thị dựa trên nhãn và tiêu đề trên blog. Sitemap cũng là một phần của SEO và một phần của chính sách tạo blog.

HTML Sitemap Blogger

Không có gì lạ khi các Blogger luôn sử dụng sitemap để giúp khách truy cập dễ dàng xem tất cả nội dung hoặc tất cả các bài viết đã được xuất bản trên blog. Tự làm cái này rất dễ, không cần dán script vào template, bạn chỉ cần tạo một trang tĩnh trên blog là có thể sử dụng miễn là mỗi bài viết có nhãn được đưa vào thì bài đăng hoặc bài viết sẽ tự động được đưa vào trang Sitemap.

Trong bài hướng dẫn này, mình sẽ chia một số mẫu sitemap cho blogspot cho các bạn lựa chọn, được làm mới, hoạt động tốt, đẹp và tương thích mọi thiết bị. Nhưng trước tiên hãy tìm hiểu:

Sitemap là gì?

Sơ đồ trang web (hoặc sitemap) là một danh sách các trang của một trang web hoặc blog.

Có ba loại sơ đồ trang web chính:

• Sơ đồ trang web được sử dụng trong quá trình lập kế hoạch của một trang web bởi các nhà thiết kế của nó.
• Danh sách có thể nhìn thấy được của con người, thường là phân cấp, của các trang trên một trang web.
• Danh sách có cấu trúc dành cho trình thu thập dữ liệu web như công cụ tìm kiếm.

Sitemap Page là gì?

• Sitemap Page là sơ đồ trang web được tạo bằng HTML (Ngôn ngữ đánh dấu văn bản siêu liên kết). Nó thường được sử dụng để tạo một danh sách cho tất cả các bài đăng được xuất bản trên trang web hoặc template của bạn.
• Sitemap Page HTML có thể giảm tỷ lệ thoát trang của bạn.

Các tính năng của code sitemap

• Cài đặt dễ dàng
• Dễ dàng tùy chỉnh
• Giới hạn bài được đặt
• Thân thiện với SEO

Hướng dẫn tạo Sitemap blogspot (Sơ đồ Blogger)

Thực hiện theo các bước đó để thêm trang sơ đồ trang web trong Blogger. Làm tất cả các bước một cách cẩn thận.

Bước 1: Đầu tiên đăng nhập vào tài khoản Blogger của bạna chọn một trang web.

Bước 2: Nhấp vào Trang > Trang mới.

Bước 3: Bây giờ Thêm Tiêu đề Trang và Chuyển chế độ soạn thành Chế độ xem HTML.

Tạo Trang tĩnh và Chế độ xem HTML.

Bước 4: Sử dụng 3 mẫu code sitemap sau đây mà mình chia sẻ để dán vào Trang vừa tạo.

Sitemap Style 1

Đây là mẫu sitemap mới, hiện đại do mình tự thiết kế thông qua Chat GPT (xem demo). Ưu điểm: nhanh, có thanh tìm kiếm bài viết tiện lợi. Nhược điểm thì chưa tìm ra 😁

Các bạn chỉ cần dán code sau vào Trang và xuất bản là ok thôi!

<div id="sitemap-page" style="max-width:900px;margin:auto;padding:20px;">
  <h2 style="text-align:center;">🗂 Sitemap - Danh sách bài viết</h2>
  <p style="text-align:center;color:#777;">Tự động cập nhật khi có bài mới</p>
  
  <!-- Ô tìm kiếm -->
  <div style="text-align:center;margin:20px 0;">
    <input type="text" id="sitemapSearch" 
           placeholder="🔍 Nhập từ khóa để tìm bài..."
           style="width:80%;max-width:500px;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:16px;">
  </div>

  <!-- Nội dung sitemap -->
  <div id="sitemapList">⏳ Đang tải dữ liệu...</div>
</div>

<script>
  var allPosts = [];

  // Hàm callback toàn cục (Blogspot JSONP sẽ gọi)
  function renderSitemap(json) {
    var container = document.getElementById("sitemapList");
    var entries = json.feed.entry;
    if (!entries) {
      container.innerHTML = "<p>Không có bài viết nào.</p>";
      return;
    }

    allPosts = entries.map(entry => {
      var title = entry.title.$t;
      var link = entry.link.find(l => l.rel === "alternate").href;
      var date = new Date(entry.published.$t);
      return {title, link, date};
    });

    displayPosts(allPosts);
  }

  // Hàm hiển thị danh sách
  function displayPosts(posts) {
    var container = document.getElementById("sitemapList");
    var html = "<ul style='list-style:none;padding-left:0;'>";
    posts.forEach(post => {
      html += "<li style='margin:8px 0;'>" +
                "📌 <a href='" + post.link + "' target='_blank' " +
                "style='text-decoration:none;color:#2c3e50;'>" +
                post.title + "</a> " +
                "<span style='color:#999;font-size:13px;'>(" + post.date.toLocaleDateString("vi-VN") + ")</span>" +
              "</li>";
    });
    html += "</ul>";
    container.innerHTML = html;
  }

  // Hàm tìm kiếm
  document.addEventListener("input", function(e){
    if(e.target && e.target.id === "sitemapSearch"){
      var keyword = e.target.value.toLowerCase();
      var filtered = allPosts.filter(p => p.title.toLowerCase().includes(keyword));
      displayPosts(filtered);
    }
  });

  // Nạp feed JSONP
  var script = document.createElement("script");
  script.src = window.location.origin + "/feeds/posts/default?alt=json-in-script&max-results=9999&callback=renderSitemap";
  document.body.appendChild(script);
</script>
  

Sitemap Style 2

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.

Sitemap Page Blogspot

Để sử dụng mẫu này mới các bạn xem bài: Chia sẻ mẫu Sitemap Page dạng Tab đẹp cho blogspot [Update 2025]

Sitemap Style 3

Đây là mẫu sitemap hiển thị bài viết theo từng mục label (xem demo) với các ưu điểm như:

1. Gom nhóm theo nhãn + đếm số bài: Tự nhóm theo label, sắp xếp A→Z; trong từng nhóm sắp mới → cũ cho dễ tra cứu.
2. Đánh dấu “NEW”: Tự gắn nhãn cho bài trong N ngày (mặc định 7) → người đọc dễ thấy nội dung mới.
3. Chống trùng & dữ liệu bẩn: Dùng Set để loại trùng theo id/link; an toàn với feed đặc thù/redirect.
4. Tùy biến đơn giản: Các tham số (BASE, PAGE_SIZE, MAX_TOTAL, NEW_DAYS, format ngày…) đặt trên đầu file → chỉnh nhanh, không đụng core.
5. Nhẹ & không cần thư viện: Thuần JS/DOM API, không jQuery; dễ minify, giảm chi phí tải.
6. Style độc lập, dễ thay: CSS đóng gói trong .jontor, tránh “dây” sang phần khác; đổi tông màu nhanh.

Code ở đây!

<div id="sitemap" class="jontor">
  <!-- Nội dung sẽ được render ở đây -->
</div>
<script type="text/javascript">
/**
 * Blogger Sitemap - Pure JS (no external deps)
 * Tác giả: Anh Trai Nắng Assistant
 * Gợi ý: chỉnh cấu hình ngay dưới cho phù hợp blog của bạn.
 */
(function () {
  /* ================== CẤU HÌNH ================== */
  var BASE = '';            // để trống sẽ tự dùng location.origin (vd: https://www.anhtrainang.com/)
  var PAGE_SIZE = 500;      // Blogger giới hạn ~500
  var MAX_TOTAL = 5000;     // trần an toàn (có thể tăng)
  var NEW_DAYS = 7;         // số ngày để gắn nhãn NEW
  var DATE_FMT = function (d) { // định dạng ngày
    return [d.getDate().toString().padStart(2, '0'),
            (d.getMonth() + 1).toString().padStart(2, '0'),
            d.getFullYear()].join('/');
  };

  /* ================== TIỆN ÍCH ================== */
  var head = document.getElementsByTagName('head')[0];
  var container = document.getElementById('sitemap');
  if (!container) { console.error('[Sitemap] Không tìm thấy #sitemap'); return; }

  function originBase() {
    if (BASE) return String(BASE).replace(/\/+$/, '');
    try { return (location.origin || (location.protocol + '//' + location.host)); }
    catch (_) { return ''; }
  }
  function htmlEscape(s) {
    return String(s || '').replace(/[&<>"']/g, function (m) {
      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m];
    });
  }
  function addScript(src, cbname, onError) {
    var s = document.createElement('script');
    s.type = 'text/javascript'; s.async = true; s.src = src;
    s.onerror = function () { if (onError) onError(); cleanup(); };
    s.onload = cleanup; // JSONP trả về sẽ tự gọi callback; onload chỉ để dọn thẻ
    function cleanup() { if (s.parentNode) s.parentNode.removeChild(s); }
    head.appendChild(s);
  }
  function jsonp(url, callback) {
    var cb = 'SITEMAP_CB_' + Date.now().toString(36) + '_' + Math.floor(Math.random() * 1e6);
    window[cb] = function (data) {
      try { callback(null, data); }
      finally { try { delete window[cb]; } catch (e) { window[cb] = undefined; } }
    };
    addScript(url + (url.indexOf('?') > -1 ? '&' : '?') + 'callback=' + cb, cb, function () {
      try { delete window[cb]; } catch (e) { window[cb] = undefined; }
      callback(new Error('network'));
    });
  }

  /* ================== UI: Loader & Lỗi ================== */
  function showLoader() {
    container.innerHTML =
      '<div class="smap-loader">Đang tải sitemap…</div>';
  }
  function showError(msg) {
    container.innerHTML =
      '<div class="smap-error">Không tải được sitemap. ' + htmlEscape(msg || '') +
      ' <button class="smap-retry" type="button">Thử lại</button></div>';
    var btn = container.querySelector('.smap-retry');
    if (btn) btn.onclick = function () { run(); };
  }

  /* ================== LẤY DỮ LIỆU ================== */
  function fetchAllPosts(done) {
    var base = originBase();
    var start = 1;
    var allEntries = [];
    var seenIds = new Set();
    var hardStop = MAX_TOTAL;
    var keepGoing = true;

    function nextPage() {
      if (!keepGoing) return finalize();
      if (allEntries.length >= hardStop) return finalize();

      var url = base + '/feeds/posts/default?alt=json-in-script' +
                '&max-results=' + PAGE_SIZE +
                '&start-index=' + start;
      jsonp(url, function (err, data) {
        if (err) return done(err);
        var entries = (data && data.feed && data.feed.entry) || [];
        // đếm & ghép, tránh trùng
        for (var i = 0; i < entries.length; i++) {
          var e = entries[i];
          var id = (e.id && e.id.$t) || (e.link && e.link[0] && e.link[0].href) || (e.title && e.title.$t + '|' + i);
          if (!seenIds.has(id)) {
            seenIds.add(id);
            allEntries.push(e);
          }
        }
        // tiếp hay dừng
        if (entries.length < PAGE_SIZE || allEntries.length >= hardStop) {
          keepGoing = false;
          return finalize();
        }
        start += PAGE_SIZE;
        // tránh dồn request: nhỏ giọt
        setTimeout(nextPage, 0);
      });
    }
    function finalize() { done(null, allEntries); }
    nextPage();
  }

  /* ================== RENDER ================== */
  function buildSitemap(entries) {
    // Group theo label
    var groups = Object.create(null);  // { label: [post, ...] }
    var noLabel = 'Khác';

    for (var i = 0; i < entries.length; i++) {
      var e = entries[i];
      var labels = (e.category || []).map(function (c) { return c.term; });
      if (!labels.length) labels = [noLabel];
      for (var j = 0; j < labels.length; j++) {
        var lb = labels[j] || noLabel;
        if (!groups[lb]) groups[lb] = [];
        groups[lb].push(e);
      }
    }

    // Sắp xếp: label A→Z, mỗi label sắp theo ngày mới→cũ
    var labelNames = Object.keys(groups).sort(function (a, b) {
      return a.localeCompare(b, 'vi', { sensitivity: 'base' });
    });

    var now = Date.now();
    var html = '';
    for (var k = 0; k < labelNames.length; k++) {
      var label = labelNames[k];
      var posts = groups[label].slice().sort(function (a, b) {
        var da = new Date(a.published && a.published.$t || 0).getTime();
        var db = new Date(b.published && b.published.$t || 0).getTime();
        return db - da; // desc
      });

      html += '<p class="teknomia_Label">' + htmlEscape(label) +
              ' <span class="teknomia_Count">(' + posts.length + ')</span></p>';
      html += '<ol class="teknomia_Postname">';

      for (var t = 0; t < posts.length; t++) {
        var p = posts[t];
        var title = (p.title && p.title.$t) || '(Không tiêu đề)';
        var link = '#';
        var links = p.link || [];
        for (var u = 0; u < links.length; u++) {
          if (links[u].rel === 'alternate') { link = links[u].href; break; }
        }
        var d = new Date(p.published && p.published.$t || 0);
        var isNew = (now - d.getTime()) <= NEW_DAYS * 86400000;
        html += '<li><a href="' + link + '">' + htmlEscape(title) + '</a>' +
                ' <span class="smap-date">— ' + DATE_FMT(d) + '</span>' +
                (isNew ? ' <span class="new">NEW</span>' : '') +
                '</li>';
      }
      html += '</ol>';
    }
    return html || '<div class="smap-empty">Chưa có bài viết.</div>';
  }

  /* ================== CHẠY ================== */
  function run() {
    showLoader();
    fetchAllPosts(function (err, entries) {
      if (err) return showError(err.message || String(err));
      try {
        container.innerHTML = buildSitemap(entries);
      } catch (e) {
        showError('Lỗi dựng HTML: ' + (e.message || e));
      }
    });
  }
  run();
})();
</script>

<style type="text/css">
/* ====== Styling gọn gàng, dựa theo mẫu anh đưa ====== */
.jontor{width:100%;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;text-decoration:none;}
.jontor p.teknomia_Label{background:#4ECDC4;display:block;padding:12px;margin:18px 0 8px;color:#0c3c38;font-weight:700;border-radius:6px;}
.jontor .teknomia_Count{font-weight:400;opacity:.9;}
.jontor ol{counter-reset:li;list-style:none;font:15px Arial;padding:0;margin:0 0 22px 26px;text-shadow:0 1px 0 rgba(255,255,255,.4);}
.jontor ol li{position:relative;display:block;padding:.48em .6em .48em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#444;transition:all .25s ease;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.05);}
.jontor ol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:left .25s;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontor .smap-date{color:#666;font-size:12px;margin-left:6px;}
.jontor .new{color:#c00!important;font-weight:700;font-style:italic;margin-left:6px;}
/* Loader + Error */
.smap-loader{padding:14px 12px;border:1px dashed #9bd; background:#eef7ff;color:#124; border-radius:6px;}
.smap-error{padding:14px 12px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:6px;}
.smap-error .smap-retry{margin-left:8px;padding:4px 10px;border-radius:999px;border:1px solid #ef4444;background:#fff;color:#b91c1c;cursor:pointer;}
.smap-error .smap-retry:hover{background:#fee2e2;}
.smap-empty{padding:12px;color:#666;}
</style>
  

Bước 5: Xuất bản Trang Sitemap vừa tạo.

Trang Sơ đồ Blogger của bạn hiện đã sẵn sàng, mở lên xem kết quả thôi.

Kết luận

Đó là cách tạo một Sitemap blogspot (Sơ đồ Blogger) thú vị và phản hồi nhanh trên blog. Theo bạn, mẫu nào ok hơn, hãy tự quyết định cho mình 1 mẫu.

Hy vọng bạn sẽ thích bài viết. Rất mong bài hướng dẫn này sẽ giúp bạn có một hướng dẫn phù hợp để cài đặt sitemap blgospot cho mình. Đừng quên chia sẻ bài đăng này cho bạn bè của bạn hoặc để lại bình luận nhé. Xin cám ơn rất nhiều!