Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Hướng dẫn tạo trang sitemap giúp blog trở nên chuyên nghiệp

Hướng dẫn tạo trang sitemap giúp blog trở nên chuyên nghiệp, sitemap, tạo sitemap cho blog, cách tạo sitemap cho blog, cách tạo sơ đồ trang web

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:

  1. Tổng thể sẽ có 2 cột, 1 bên là label và một bên là các bài post.
  2. Thêm thẻ New! cho 3 bài viết mới nhất của mỗi chuyên mục.
  3. Đề 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,"&#37;").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&hellip;",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?"&hellip;":"")+"</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 ID và 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:
No pain, no gain !

تعليقان (2)

  1. nếu anh không phiền, sửa giúp em liên kết của em với:

    Liên kết cũ là: Hồng Lâm Blog (honglamblog.xyz)

    Name: Yuzu Tips
    URL: https://www.yuzutips.xyz/
    Description: A girl who is passionate about Blogger - Yuzu website shares good tips

    em vẫn đặt liên kết của anh ở: https://www.yuzutips.xyz/p/partner-sites.html?m=1

    cảm ơn anh ạ :3
    1. Okee nhé!
© Phạm Văn Linh. All rights reserved. Developed by Jago Desain