Cách tạo Sitemap hiển thị theo chủ đề Label lựa chọn cho Blogspot

Sitemap Theo Label Chọn Theo Yêu Cầu là giải pháp tối ưu giúp quản lý nội dung hiệu quả, tăng trải nghiệm người dùng tốt hơn. Với khả năng tùy chỉnh danh mục hiển thị, sắp xếp theo ý muốn và giao diện gọn gàng, đây là lựa chọn phù hợp cho các website Blogger hiện đại và chuyên nghiệp.Chúng ta đi tìm hiểu cách tạo Sitemap hiển thi theo danh mục mình tự chọn theo Label chuyên nghiệp hơn.

TẠO SITEMAP CHO BLOGSPOT

Demo: Tại đây

Cách làm:

- Bước 1: Truy cập vào trang đăng nhập Blogger
- Bước 2: Vào mục Trang (Page) rồi tạo một "Trang mới" (New Page)
- Bước 3: Chuyển sang Tab chế độ HTML rồi Paste đoạn Code dưới đây vào và thay link Blogspot của bạn vào nhé.

<div id="apollo-sitemap"></div>

<style>
#apollo-sitemap{
  max-width:1200px;
  margin:40px auto;
  padding:0;
  font-family:Arial,sans-serif;
}

.apollo-group{
  margin-bottom:28px;
  background:#fff;
  border:1px solid rgba(199,154,82,.15);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.apollo-title{
  background:linear-gradient(135deg,#17110b,#2c1d0f);
  color:#f4d99b;
  padding:16px 22px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.5px;
}

.apollo-list{
  list-style:none;
  margin:0;
  padding:0;
}

.apollo-list li{
  border-bottom:1px solid #f2f2f2;
}

.apollo-list li:last-child{
  border-bottom:none;
}

.apollo-list a{
  display:block;
  padding:14px 22px;
  color:#333;
  text-decoration:none;
  transition:.3s;
  line-height:1.6;
}

.apollo-list a:hover{
  background:#faf7f2;
  color:#c79a52;
  padding-left:28px;
}

.apollo-loading{
  text-align:center;
  padding:30px;
  color:#999;
}

.apollo-empty{
  padding:15px 22px;
  color:#999;
}

@media(max-width:768px){
  .apollo-title{
    font-size:16px;
    padding:14px 18px;
  }

  .apollo-list a{
    padding:12px 18px;
    font-size:14px;
  }
}
</style>

<script>
const labels = [
  "Blogspot",
  "Marketing",
  "Bất động sản",
  "Kinh doanh",
];

const sitemap = document.getElementById("apollo-sitemap");

sitemap.innerHTML =
'<div class="apollo-loading">Đang tải danh sách bài viết...</div>';

async function loadLabel(label){

  try{

    const url =
      '/feeds/posts/default/-/' +
      encodeURIComponent(label) +
      '?alt=json&max-results=500';

    const response = await fetch(url);
    const data = await response.json();

    const posts = data.feed.entry || [];

    let html =
      '<div class="apollo-group">' +
      '<div class="apollo-title">' +
      label +
      ' (' + posts.length + ')' +
      '</div>';

    if(posts.length){

      html += '<ul class="apollo-list">';

      posts.forEach(post => {

        const title = post.title.$t;

        const link = post.link.find(
          l => l.rel === "alternate"
        ).href;

        html +=
          '<li>' +
          '<a href="' + link + '">' +
          title +
          '</a>' +
          '</li>';

      });

      html += '</ul>';

    }else{

      html +=
        '<div class="apollo-empty">Chưa có bài viết.</div>';

    }

    html += '</div>';

    return html;

  }catch(e){

    return '';
  }
}

(async function(){

  sitemap.innerHTML='';

  for(const label of labels){

    sitemap.innerHTML += await loadLabel(label);

  }

})();
</script>

Lưu ý: Chỉ cần sửa phần này theo Label thực tế của bạn, bạn có thể thêm bớt tùy ý theo số lượng

const labels = [

"Blogspot",

"Marketing",

"Bất động sản",

"Kinh doanh",

];