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.

Để nhúng iframe hiển thị tốt (responsive) trên mọi thiết bị, giải pháp tối ưu là bọc iframe trong một thẻ div cố định tỷ lệ khung hình hoặc sử dụng thuộc tính CSS aspect-ratio. Cách này giúp khung hình tự co giãn theo chiều rộng màn hình nhưng vẫn giữ nguyên tỷ lệ gốc.

Mối quan tâm chính của tôi là khi độc giả truy cập blog của tôi trên iPhone, tôi không muốn mọi thứ đều có chiều rộng x (100% cho toàn bộ nội dung) và sau đó iFrame hoạt động không đúng cách, trở thành phần tử duy nhất rộng hơn (và do đó nhô ra khỏi tất cả nội dung khác - bạn hiểu ý tôi chứ?).

Cách tạo Sitemap hiển thị theo chủ đề Label

TẠO SITEMAP CHO BLOGSPOT

Cách làm:

1. - Bước 1: Truy cập vào trang đăng nhập Blogger
2. - Bước 2: Vào mục Trang (Page) rồi tạo một "Trang mới" (New Page)
3. - 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é.

<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",
];