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.

(toc) #title=(Table of Content)

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

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.

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 sẻ 3 mẫu sitemap cho blogspot cho các bạn lựa chọn, còn 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

<div id="bp_toc" style="overflow-x: auto;"></div>
<script src="https://cdn.rawgit.com/ns24h/js/master/sitemap.js"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc"></script>
<style>table {width: 100%;border: 1px solid #ddd;} .post-body td, .post-body th {text-align: left;font-size: 16px;padding: 5px 10px;border: 1px solid #ddd;} .post-body .toc-header-col1{width:60%} .post-body .toc-header-col2,.post-body .toc-header-col3{width:20%} .post-body td a{color:#333} .post-body td a:hover{color: #2196f3;} </style>

Tùy chỉnh: max-results=9999 là số lượng bài viết bạn muốn hiện thị. Hãy thay đổi theo nhu cầu hiển thị của bạn.

(getButton) #text=(Live Demo 1) #icon=(link)

Sitemap Style 2

<script type="text/javascript">
 var numposts = 100;
 var standardstyling = true;
 function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
     posturl = entry.link[k].href;
     break;
    }}
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write('<li>');
   document.write(posttitle);
  }
   if (standardstyling) document.write('</li>');
 }
</script>
<ol style="margin:0">
 <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>

Tùy chỉnh: var numposts = 100 là số lượng bài viết bạn muốn hiện thị. Hãy thay đổi theo nhu cầu hiển thị của bạn.

(getButton) #text=(Live Demo 2) #icon=(link)

Sitemap Style 3

<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.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;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style> 

Tùy chỉnh: Tương tự mẫu 1.

(getButton) #text=(Live Demo 3) #icon=(link)

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!