Cách tạo Sitemap HTML cho Blog/Website

Hello chào cả nhà, hôm nay HoangLam sẽ hướng dẫn cho anh em cách tạo một Sitemap hay sơ đồ trang HTML cho Blog và website nhé. Oki, không dài dòng nữa, chúng ta cùng bắt đầu thôi

Có 2 mẫu để anh em có thể chọn lựa, để bắt đầu chúng ta vào trang quản lý blogger, chọn phần Trang >> Trang mới >> chuyển chế độ soạn sang chế độ soạn html

Đối với DemoV1 anh em sẽ làm theo các bước bên dưới nhé:

Bước 1: Anh em copy phần code dưới đây và dán vào phần trang vừa tạo ở trên:

<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>

Bước 2: Tiếp theo chúng ta sẽ sử dụng đoạn code này cho mỗi label, anh em có bao nhiêu label thì chèn bấy nhiêu đoạn code này vào:

<strong><a href="http://www.your_domain.abcxyz/search/label/HoangLam%20Tutorial">HoangLam Tutorial</a></strong>
<br />
<br />
<ul>
<script src="http://www.your_domain.abcxyz/feeds/posts/default/-/HoangLam%20Tutorial?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=88888888"></script>
</ul>
<br />

Lưu ý:

  • your_domain.abcxyz là domain website/blog của anh em
  • Thay HoangLam%20Tutorial bằng tên nhãn của anh em. Ví dụ mình có nhãn là Nguyễn Đức Hoàng thì mình sẽ thay là Nguyễn%20Đức%2Hoàng (có phân biệt chữ hoa và chữ thường nhé). Nhãn có 1 từ thì không cần thêm %20
  • Anh em thay HoangLam Tutorial bằng nhãn tương ứng với nhãn của anh em thay ở url phía trên

Và cứ thế, anh em có bao nhiêu nhãn thì tạo bấy nhiêu đoạn code ở Bước 2 vào, lưu ý là đoạn code ở Bước 1 để nguyên chỉ làm một lần nhé.

Đối với DemoV2

Mọi công việc sẽ nhanh gọn lẹ hơn, khi anh em chỉ việc tạo trang mới và dán đoạn code dưới đây vào:

<div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://your_domain.abcxyz/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
  <style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:1px solid var(--content-border);border-radius:5px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>

Lưu ý:

  • Anh em thay thế your_domain.abcxyz. bằng domain của anh em vào nhé

Cuối cùng anh em chỉ cần thêm tiêu đề và nhấn Xuất bản để lưu lại là được nhé.

Trên đây là bài hướng dẫn cách tạo sitemap html cho blog/website, nếu anh em có ý kiến thắc mắc, hay đóng góp cho những bài viết tiếp theo thì hãy comment bên dưới để team được biết nhé.