Chắc hẳn thuật ngữ sitemap không còn quá xa lạ với những người làm trang web, đặc biệt là anh em blogger. Thế nhưng làm sao để tạo được sitemap thì chưa chắc ai cũng biết. Vì vậy, trong bài viết hôm nay mình sẽ hướng dẫn mọi người cách làm tạo trang sitemap cho blog.
 |
| Hướng dẫn tạo trang sitemap giúp blog trở nên chuyên nghiệp |
Kiểu sitemap này mình thấy template gốc của Median dùng nên mình đã lấy về thử và tinh chỉnh một chút sau đó chia sẻ cho mọi người.
Demo và mô tả
Demo
Trước khi đến với hướng dẫn, hãy xem qua demo ở bên dưới đây nhé!
Mô tả
Mình sẽ nói sơ qua một chút về kiểu sitemap này:
- Tổng thể sẽ có 2 cột, 1 bên là label và một bên là các bài post.
- Thêm thẻ New! cho 3 bài viết mới nhất của mỗi chuyên mục.
- Đề xuất bài viết ngẫu nhiên tại 1 trong những chuyên mục bạn ấn vào.
Hướng dẫn
Không lòng vòng nữa vào thẳng hướng dẫn nào. Let's go!- Bước 1: Mở Blogger sau đó tạo một trang mới!
-
Bước 2: Dán toàn bộ đoạn code bên dưới vào trang.
<style> .tabbed-toc{margin-right:auto;margin-left:auto;display:table;table-layout:fixed;border-collapse:collapse;width:100%;border:1px solid;clear:both} .tabbed-toc:focus{outline:0} .tabbed-toc.ltr{direction:ltr;text-align:left} .tabbed-toc.rtl{direction:rtl;text-align:right} .tabbed-toc a{text-decoration:none} .tabbed-toc nav,.tabbed-toc section{display:table-cell;text-align:inherit;vertical-align:top;overflow:hidden} .tabbed-toc-tabs{width:12em} .ltr .tabbed-toc-panels{border-left:1px solid} .rtl .tabbed-toc-panels{border-right:1px solid} .tabbed-toc-title{font:inherit;margin:0;padding:0;display:none} .tabbed-toc li,.tabbed-toc nav,.tabbed-toc ol,.tabbed-toc section{margin:0;padding:0;list-style:none} .tabbed-toc-tab{display:block;height:3em;line-height:3em;padding:0 1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .tabbed-toc-tab.active{color:inherit} .has-image .tabbed-toc-image.loading,.tabbed-toc .tabbed-toc-loading{background:url(data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==)50% 50% no-repeat} .tabbed-toc .tabbed-toc-loading{padding:1em;background-position:1em 1em;color:transparent;text-shadow:none} .rtl .tabbed-toc-loading{background-position:calc(100% - 1em)1em} .tabbed-toc li{padding:.25em .75em;line-height:1.5;position:relative;overflow:hidden} .has-image li{padding:1em} .tabbed-toc-excerpt,.tabbed-toc-image,.tabbed-toc-time{display:block;margin:0;padding:0;overflow:hidden} .tabbed-toc li .tabbed-toc-title{display:block} .has-image li .tabbed-toc-title{font-size:1.25em;line-height:1.25em;margin:-.25em 0 .5em} .tabbed-toc-title sup{font:inherit;font-weight:700;color:red;display:inline-block;vertical-align:baseline;margin:0 .25em} .has-image .tabbed-toc-title sup{line-height:1;font-size:.75em;vertical-align:top;margin:0} .tabbed-toc-time{display:block;padding:inherit;position:absolute;top:0} .ltr .tabbed-toc-time{right:0} .rtl .tabbed-toc-time{left:0} .has-image .tabbed-toc-time{position:static;padding:0;font-size:.75em;letter-spacing:.25em;text-transform:uppercase} .has-image .tabbed-toc-image{display:block;float:left;margin:0 1em 0 0} .has-image.rtl .tabbed-toc-image{float:right;margin:0 0 0 1em} .has-image .stacked-toc-image img{opacity:1;visibility:visible;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease} .has-image .stacked-toc-image.loading img{opacity:0;visibility:hidden} .tabbed-toc .img{background:rgba(0,0,0,.05)} .tabbed-toc-excerpt{margin:.5em 0 0} .has-excerpt:not(.has-image) li{padding-bottom:.35em} .has-excerpt:not(.has-image) li .tabbed-toc-title{font-weight:700} @media (max-width:750px){ .tabbed-toc,.tabbed-toc nav,.tabbed-toc section{display:block;width:auto} .tabbed-toc section{border-top:1px solid} .tabbed-toc.ltr section{border-left:0} .tabbed-toc.rtl section{border-right:0} .tabbed-toc.ltr .tabbed-toc-tab{float:left} .tabbed-toc.rtl .tabbed-toc-tab{float:right} } @media (max-width:640px){ .tabbed-toc-time{display:none} } .tabbed-toc{border:0;font-size:15px} .tabbed-toc-tabs{width:10em;font-size:14px} .tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:all .1s ease;color:inherit} .tabbed-toc-tab::after{content:"";position:absolute;top:0;bottom:0;right:0;border-right:1px solid #27aaff;opacity:0} .tabbed-toc-tab:hover,.tabbed-toc-tab.active{background:rgba(0,0,0,.05)} .tabbed-toc-tab:hover::after,.tabbed-toc-tab.active::after{opacity:1} .tabbed-toc-tab.active{color:#27aaff;opacity:0.7} .ltr .tabbed-toc-panels{border-color:#e6e6e6} .ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:0.7;flex-shrink:0} .tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between} .tabbed-toc li > *{padding:0 7.5px;margin:0!important} .tabbed-toc a{color:inherit} .tabbed-toc-title{font-size:16px} .tabbed-toc-title sup{font-weight:400;font-size:12px;color:#27aaff} @media screen and (max-width:750px){ .tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;/*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/} .tabbed-toc nav::-webkit-scrollbar{width:0;height:0} .tabbed-toc nav::-webkit-scrollbar-track{background:transparent} .tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none} .tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start} .tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid #27aaff} .tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal} .tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit} } @media screen and (max-width:500px){ .tabbed-toc-title{font-size:15px} } </style> !function(e,t){function r(e,t){function r(e){return decodeURIComponent(e)}function n(e){return void 0!==e}function i(e){return"string"==typeof e}function a(e){return i(e)&&""!==e.trim()?'""'===e||"[]"===e||"{}"===e||'"'===e[0]&&'"'===e.slice(-1)||"["===e[0]&&"]"===e.slice(-1)||"{"===e[0]&&"}"===e.slice(-1):!1}function s(e){if(i(e)){if("true"===e)return!0;if("false"===e)return!1;if("null"===e)return null;if("'"===e.slice(0,1)&&"'"===e.slice(-1))return e.slice(1,-1);if(/^-?(\d*\.)?\d+$/.test(e))return+e;if(a(e))try{return JSON.parse(e)}catch(t){}}return e}function o(e,t,r){for(var n,i=t.split("["),a=0,s=i.length;s-1>a;++a)n=i[a].replace(/\]$/,""),e=e[n]||(e[n]={});e[i[a].replace(/\]$/,"")]=r}var l={},c=e.replace(/^.*?\?/,"");return""===c?l:(c.split(/&(?:amp;)?/).forEach(function(e){var i=e.split("="),a=r(i[0]),c=n(i[1])?r(i[1]):!0;c=!n(t)||t?s(c):c,"]"===a.slice(-1)?o(l,a,c):l[a]=c}),l)}e[t]=r}(window,"q2o"),function(e,t){function r(e){return encodeURIComponent(e)}function n(e){return void 0!==e}function i(e){return"string"==typeof e}function a(e){return"number"==typeof e||/^-?(\d*\.)?\d+$/.test(e)}function s(e){return null!==e&&"object"==typeof e}function o(e,t){t=t||{};for(var r in e)n(t[r])?s(e[r])&&s(t[r])&&(t[r]=o(e[r],t[r])):t[r]=e[r];return t}function l(e,t,r){e.addEventListener(t,r,!1)}function c(e,r,i){if(e=t.createElement(e),n(r)&&""!==r&&(e.innerHTML=r),s(i))for(var a in i)i[a]!==!1&&e.setAttribute(a,i[a]);return e}function u(e,t){t=t.split(/\s+/);for(var r;r=t.shift();)e.classList.add(r)}function d(e,t){t=t.split(/\s+/);for(var r;r=t.shift();)e.classList.remove(r)}function f(e,t){return e.classList.contains(t)}function h(e,t,r){t&&e.insertBefore(t,r)}function p(e){e.parentNode&&e.parentNode.removeChild(e)}function g(e,t){var n,i=[];for(n in e)i.push(r(n)+"="+r(e[n]));return"?"+i.join(t||"&")}function m(e,t){return e=(e+"").split(/[?&#]/)[0].replace(/\/+$/,""),n(t)&&(e=e.replace(/\.[\w-]+$/,t?"."+t:"")),e}function v(e){return a(e)?("file:"===T.protocol?"https:":"")+"//www.blogger.com/feeds/"+e+"/posts/summary":m(e)+"/feeds/posts/summary"}function y(e,t,r){var n=/\.css$/i.test(m(e)),i=c(n?"link":"script","",o(n?{href:e,rel:"stylesheet"}:{src:e},r));return i.readyState?i.onreadystatechange=function(){("loaded"===i.readyState||"complete"===i.readyState)&&(i.onreadystatechange=null,t&&t(i))}:t&&l(i,"load",t),h(D,i,D.firstChild),i}function b(e,t,r){r=r||[],r.unshift(t),"function"==typeof W&&W.apply(e,r)}function x(){if(B!==!1){var e=+(L.getItem(A)||-1);if(e>B)return L.setItem(A,0),!0;L.setItem(A,++e)}return!1}function $(e,t){var r,n=e.split("T"),i=n[0].split("-"),a=n[1].split("+")[0].split(":"),s=+a[0],o=s,l={"M~":J.months[+i[1]-1],"D~":J.days[new Date(e).getDay()],"h~":s+"",Y:i[0],M:i[1],D:i[2],h:o+"",m:a[1]};for(r in l)t=t.replace(/\\%/g,"%").replace(RegExp("%"+r+"%","g"),l[r]);return t}function w(){S.id||(S.id=A+"-js"),u(S,A+"-js");var e=I.container,r=I.css;r&&!t.getElementById(A+"-css")&&y(i(r)?r:m(S.src,"css"),function(){b(this,"load.asset",[this.href])},{"class":A+"-css",id:A+"-css"}),y(v(O)+g(o(I.query,{callback:"_"+_,"max-results":0})),function(){e?(e=t.querySelector(e),e&&(e.innerHTML=""),h(e,F)):h(S.parentNode,F,S),d(F.parentNode,A+"-loading"),b(this,"load.asset",[this.src]);var r=I.active;a(r)&&(r=j[r]),C[r]&&C[r].click()})}var k,N,M=e.q2o,S=t.currentScript,T=e.location,L=e.localStorage,C={},j=[],q={},H=9999,_=Date.now(),E={i:_,direction:"ltr",url:T.protocol+"//"+T.host,name:"tabbed-toc",css:1,sort:1,ad:!0,active:0,container:0,date:"%M~% %D%, %Y%",excerpt:0,image:0,target:0,load:0,recent:3,hide:[],text:{title:"Table of Content",loading:"Loading…",noon:["AM","PM"],months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],recent:" <sup>New!</sup>"},query:{alt:"json",orderby:"published","max-results":H,"start-index":1}},D=t.head,I=o(E,M(S.src)),R=I.i,O=I.id||m(I.url),A=I.name,B=I.ad,J=I.text,W=I.e,F=c("div",'<h3 class="'+A+'-title">'+J.title+"</h3>",{"class":A+" "+I.direction,id:A+":"+R}),U=c("p",J.loading,{"class":A+"-loading"});W=W&&e[W],B===!0&&(B=3);var P=M(T.search);n(P[R])&&(delete P[R].url,I=o(I,P[R])),e["_"+_]=function(n){function s(e){var t=this.id.split(":")[1],n=this.title,i=F.parentNode,a=C[n],s=q[n];for(f in C)f!==n&&d(C[f],"active");for(f in q)f!==n&&(d(q[f],"active"),q[f].style.display="none",q[f].previousSibling.style.display="none");s.$||(u(a,"loading"),u(s,"loading"),h(F.children[2],U),u(i,A+"-loading"),y(v(O)+"/-/"+r(n)+g(o(I.query,{callback:"_"+(_+1)})),function(){d(i,A+"-loading"),d(a,"loading"),d(s,"loading"),p(U)},{"class":A+"-js",id:A+"-js:"+t})),u(a,"active"),u(s,"active"),s.style.display="",s.previousSibling.style.display="",b(this,"click",[{},C,q]),b(F,"change",[{},a,s]),e.preventDefault()}n=n.feed||{};var f,x=I.sort,$=n.entry||[],w=n.category||[],k=($.length,w.length);a(x)?(x=+x,w=w.sort(function(e,t){return e.term.localeCompare(t.term)}),-1===x&&(w=w.reverse())):i(x)&&(x=e[x],w=w.sort(x));var N,M=c("nav","",{"class":A+"-tabs p"});h(F,M),h(F,c("section","",{"class":A+"-panels p"}));var S=Object.values(I.hide);for(f=0;k>f;++f){var T=w[f].term;S.indexOf(T)>-1||(N=c("a",T,{"class":A+"-tab "+A+"-tab:"+f,href:m(I.url)+"/search/label/"+r(T),id:A+"-tab:"+R+"."+f,title:T}),j.push(T),C[T]=N,l(N,"click",s),h(M,N),k-1>f&&h(M,t.createTextNode(" ")),h(F.children[2],c("h4",T,{"class":A+"-title"})),h(F.children[2],q[T]=c("ol","",{"class":A+"-panel "+A+"-panel:"+f,id:A+"-panel:"+R+"."+f})))}b(F,"load",[n,C,q])},e["_"+(_+1)]=function(t){t=t.feed||{};var n,s,p=I.sort,m=((t.link.find(function(e){return"alternate"===e.rel})||{}).href||"").split("/").pop(),w=t.entry||[],M=w.length;for(k=q[m],M&&!f(k,"active")&&C[m].click(),n=0;M>n;++n){var S=n<I.recent?J.recent:"";w[n].$=!!S,w[n].title.$t+=S}a(p)?(p=+p,w=w.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}),-1===p&&(w=w.reverse())):i(p)&&(p=e[p],w=w.sort(p));var T=I.target,L=I.image,j=I.excerpt,H="has-title has-url";I.date&&(H+=" has-time"),L&&(H+=" has-image"),j&&(H+=" has-excerpt"),u(F,H),N=function(e){if(e){var t=e.published.$t,r=(e.link.find(function(e){return"alternate"===e.rel})||{}).href,n="";if(r){if(L){var i,s,o,l="media$thumbnail"in e;L===!0&&(L=80),a(L)?(i=s=L+"px",L="s"+L+"-c"):(o=/^s(\d+)(\-[cp])?$/.exec(L))?(i=o[1]+"px",s=o[2]?o[1]+"px":"auto"):(o=/^w(\d+)\-h(\d+)(\-[cp])?$/.exec(L))&&(i=o[1]+"px",s=o[2]+"px"),n+='<p class="'+A+"-image "+(l?"loading":"no-image")+'">',n+=l?'<img alt="" src="'+e.media$thumbnail.url.replace(/\/s\d+(\-c)?\//g,"/"+L+"/")+'" style="display:block;width:'+i+";height:"+s+';">':'<span class="img" style="display:block;width:'+i+";height:"+s+';">',n+="</p>"}if(n+='<h5 class="'+A+'-title"><a href="'+r+'"'+(T?' target="'+T+'"':"")+">"+e.title.$t+"</a></h5>",I.date&&(n+='<p class="'+A+'-time"><time datetime="'+t+'">'+$(t,I.date)+"</time></p>"),j){var u=e.summary.$t.replace(/<.*?>/g,"").replace(/[<>]/g,"").trim(),d=u.length;j===!0&&(j=200),n+='<p class="'+A+"-excerpt"+(d?"":" no-excerpt")+'">'+u.slice(0,j)+(d>j?"…":"")+"</p>"}return c("li",n,{"class":e.$?"recent":!1})}}};for(n=0;M>n;++n)h(k,N(w[n]));if(L){var E=k.getElementsByTagName("img"),D=function(){u(this.parentNode,"error"),b(this,"error.asset",[this.src])},R=function(){d(this.parentNode,"loading"),b(this,"load.asset",[this.src])};for(n=0,s=E.length;s>n;++n)l(E[n],"error",D),l(E[n],"load",R)}x()&&y(v("Blog ID")+g(o(I.query,{callback:"_"+_+"_","max-results":21,orderby:"updated"}))+"&q="+r(m.toLowerCase())),q[m].$=!0,b(q[m],"load",[{},C,q])},e["_"+_+"_"]=function(e){e=e.feed||{};var t=e.entry||[];t=t[Math.floor(Math.random()*t.length)],(t=N(t))&&(u(t,"ad"),h(k,t,k.firstChild)),b(t,"load.ad",[e,C,q])},a(I.load)?e.setTimeout(w,+I.load):I.load===!0?l(e,"load",w):w(),b(F,"ready",[I,C,q])}(window,document); </script> - Bước 3: Tìm
Blog IDvà thay ID blog của bạn vào đó! - Bước 4: Lưu lại! Vậy là thành công!
CSS Dark mode cho những bạn cần sử dụng!
.darkmode .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,0.1)}
.darkmode .tabbed-toc-tab.active,.darkmode .tabbed-toc-title sup{color:#8775f5}
.darkmode .tabbed-toc-tab::after{border-color:#8775f5}</style>
@media screen and (max-width:750px){
.darkmode .tabbed-toc-tab::after{border-color:#8775f5}
}
Lời kết
Vậy là mình đã chia sẻ cho các bạn cách để tạo một trang sơ đồ trang web giúp blog trở nên chuyên nghiệp và người xem có thể dễ theo dõi blog của bạn hơn! Nếu có bất cứ thắc mắc nào hãy để lại comment ở bên dưới nhé!
Copyright © Phạm Văn Linh
Đánh Giá Bài Viết:
