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.
Demo Sitemap 1: nguyên bản
Phiên bản này phụ thuộc vào trang khác, AMP không cho phép
<!--[ Sitemap script DTE, source: dte.web.id/teknis/widget-daftar-isi-tabulasi-blogger ]--> <script src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=true&ad=false&date=%25M~%25%20%25D%25%2C%20%25Y%25' defer='defer'></script> <style> .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:var(--trans-1);color:inherit} .tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0} .tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)} .tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1} .tabbed-toc-tab.active{color:var(--linkC);opacity:.7} .ltr .tabbed-toc-panels{border-color:var(--contentL)} .ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7} .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} .tabbed-toc a{color:inherit} .tabbed-toc-title{font-size:16px} .tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)} .drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)} .drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)} .drkM .tabbed-toc-tab::after{border-color:var(--darkL)} @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 var(--linkC)} .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} .drkM .tabbed-toc-tab::after{border-color:var(--darkL)} } @media screen and (max-width:500px){ .tabbed-toc-title{font-size:15px} } </style>Demo 1:Phiên bản đã chỉnh sửa
<script>/*<![CDATA[*/ /*! Tabbed TOC for Blogger V3 <https://iteamos.blogspot.com/> */ !function(e,t){window.q2o=function(e,t){function r(e){return decodeURIComponent(e)}function n(e){return void 0!==e}function a(e){return"string"==typeof e}function i(e){if(a(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(function(e){return!(!a(e)||""===e.trim())&&('""'===e||"[]"===e||"{}"===e||'"'===e[0]&&'"'===e.slice(-1)||"["===e[0]&&"]"===e.slice(-1)||"{"===e[0]&&"}"===e.slice(-1))}(e))try{return JSON.parse(e)}catch(e){}}return e}var s={},l=e.replace(/^.*?\?/,"");return""===l?s:(l.split(/&(?:amp;)?/).forEach(function(e){var a=e.split("="),l=r(a[0]),o=!n(a[1])||r(a[1]);o=!n(t)||t?i(o):o,"]"===l.slice(-1)?function(e,t,r){for(var n,a=t.split("["),i=0,s=a.length;s-1>i;++i)e=e[n=a[i].replace(/\]$/,"")]||(e[n]={});e[a[i].replace(/\]$/,"")]=r}(s,l,o):s[l]=o}),s)}}(),function(e,t){function r(e){return encodeURIComponent(e)}function n(e){return void 0!==e}function a(e){return"string"==typeof e}function i(e){return"number"==typeof e||/^-?(\d*\.)?\d+$/.test(e)}function s(e){return null!==e&&"object"==typeof e}function l(e,t){for(var r in t=t||{},e)n(t[r])?s(e[r])&&s(t[r])&&(t[r]=l(e[r],t[r])):t[r]=e[r];return t}function o(e,t,r){e.addEventListener(t,r,!1)}function c(e,r,a){if(e=t.createElement(e),n(r)&&""!==r&&(e.innerHTML=r),s(a))for(var i in a)!1!==a[i]&&e.setAttribute(i,a[i]);return e}function d(e,t){var r;for(t=t.split(/\s+/);r=t.shift();)e.classList.add(r)}function u(e,t){var r;for(t=t.split(/\s+/);r=t.shift();)e.classList.remove(r)}function f(e,t,r){t&&e.insertBefore(t,r)}var p=e.q2o,h=t.currentScript,m=e.location,g=e.localStorage,y={},v=[],b={},x=Date.now(),$={i:x,direction:"ltr",url:m.protocol+"//"+m.host,name:"tabbed-toc",css:1,sort:1,ad:!0,active:0,container:0,date:"%M~% %D%, %Y% %h%:%m% %N%",excerpt:0,image:0,target:0,load:0,recent:7,hide:[],text:{title:"Table of Content",loading:"Loading…",noon:["AM","PM"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],recent:" <sup>New!</sup>"},query:{alt:"json",orderby:"published","max-results":9999,"start-index":1}},w=t.head,N=l($,p(h.src));function M(e,t){var n,a=[];for(n in e)a.push(r(n)+"="+r(e[n]));return"?"+a.join(t||"&")}function k(e,t){return e=(e+"").split(/[?&#]/)[0].replace(/\/+$/,""),n(t)&&(e=e.replace(/\.[\w-]+$/,t?"."+t:"")),e}function S(e){return i(e)?("file:"===m.protocol?"https:":"")+"//www.blogger.com/feeds/"+e+"/posts/summary":k(e)+"/feeds/posts/summary"}function C(e,t,r){var n=/\.css$/i.test(k(e)),a=c(n?"link":"script","",l(n?{href:e,rel:"stylesheet"}:{src:e},r));return a.readyState?a.onreadystatechange=function(){"loaded"!==a.readyState&&"complete"!==a.readyState||(a.onreadystatechange=null,t&&t(a))}:t&&o(a,"load",t),f(w,a,w.firstChild),a}var T,j,q=N.i,D=N.id||k(N.url),L=N.name,_=N.ad,I=N.text,E=N.e,A=c("div",'<h3 class="'+L+'-title">'+I.title+"</h3>",{class:L+" "+N.direction,id:L+":"+q}),J=c("p",I.loading,{class:L+"-loading"});function O(e,t,r){(r=r||[]).unshift(t),"function"==typeof E&&E.apply(e,r)}E=E&&e[E],!0===_&&(_=3);var R=p(m.search);function B(){h.id||(h.id=L+"-js"),d(h,L+"-js");var e=N.container,r=N.css;r&&!t.getElementById(L+"-css")&&C(a(r)?r:k(h.src,"css"),function(){O(this,"load.asset",[this.href])},{class:L+"-css",id:L+"-css"}),C(S(D)+M(l(N.query,{callback:"_"+x,"max-results":0})),function(){e?((e=t.querySelector(e))&&(e.innerHTML=""),f(e,A)):f(h.parentNode,A,h),u(A.parentNode,L+"-loading"),O(this,"load.asset",[this.src]);var r=N.active;i(r)&&(r=v[r]),y[r]&&y[r].click()})}n(R[q])&&(delete R[q].url,N=l(N,R[q])),e["_"+x]=function(n){n=n.feed||{};var s,p=N.sort,h=n.entry||[],m=n.category||[],g=(h.length,m.length);function $(e){var t=this.id.split(":")[1],n=this.title,a=A.parentNode,i=y[n],o=b[n];for(s in y)s!==n&&u(y[s],"active");for(s in b)s!==n&&(u(b[s],"active"),b[s].style.display="none",b[s].previousSibling.style.display="none");o.$||(d(i,"loading"),d(o,"loading"),f(A.children[2],J),d(a,L+"-loading"),C(S(D)+"/-/"+r(n)+M(l(N.query,{callback:"_"+(x+1)})),function(){var e;u(a,L+"-loading"),u(i,"loading"),u(o,"loading"),(e=J).parentNode&&e.parentNode.removeChild(e)},{class:L+"-js",id:L+"-js:"+t})),d(i,"active"),d(o,"active"),o.style.display="",o.previousSibling.style.display="",O(this,"click",[{},y,b]),O(A,"change",[{},i,o]),e.preventDefault()}i(p)?(p=+p,m=m.sort(function(e,t){return e.term.localeCompare(t.term)}),-1===p&&(m=m.reverse())):a(p)&&(p=e[p],m=m.sort(p));var w,T=c("nav","",{class:L+"-tabs p"});f(A,T),f(A,c("section","",{class:L+"-panels p"}));var j=Object.values(N.hide);for(s=0;s<g;++s){var _=m[s].term;j.indexOf(_)>-1||(w=c("a",_,{class:L+"-tab "+L+"-tab:"+s,href:k(N.url)+"/search/label/"+r(_),id:L+"-tab:"+q+"."+s,title:_}),v.push(_),y[_]=w,o(w,"click",$),f(T,w),s<g-1&&f(T,t.createTextNode(" ")),f(A.children[2],c("h4",_,{class:L+"-title"})),f(A.children[2],b[_]=c("ol","",{class:L+"-panel "+L+"-panel:"+s,id:L+"-panel:"+q+"."+s})))}O(A,"load",[n,y,b])},e["_"+(x+1)]=function(t){t=t.feed||{};var n,s,p,h=N.sort,m=(p=(t.link.find(function(e){return"alternate"===e.rel})||{}).href||"",decodeURIComponent(p)).split("/").pop(),v=t.entry||[],$=v.length;for(T=b[m],$&&!function(e,t){return e.classList.contains(t)}(T,"active")&&y[m].click(),n=0;n<$;++n){var w=n<N.recent?I.recent:"";v[n].$=!!w,v[n].title.$t+=w}i(h)?(h=+h,v=v.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}),-1===h&&(v=v.reverse())):a(h)&&(h=e[h],v=v.sort(h));var k=N.target,q=N.image,D=N.excerpt,E="has-title has-url";for(N.date&&(E+=" has-time"),q&&(E+=" has-image"),D&&(E+=" has-excerpt"),d(A,E),j=function(e){if(e){var t=e.published.$t,r=(e.link.find(function(e){return"alternate"===e.rel})||{}).href,n="";if(r){if(q){var a,s,l,o="media$thumbnail"in e;!0===q&&(q=80),i(q)?(a=s=q+"px",q="s"+q+"-c"):(l=/^s(\d+)(\-[cp])?$/.exec(q))?(a=l[1]+"px",s=l[2]?l[1]+"px":"auto"):(l=/^w(\d+)\-h(\d+)(\-[cp])?$/.exec(q))&&(a=l[1]+"px",s=l[2]+"px"),n+='<p class="'+L+"-image "+(o?"loading":"no-image")+'">',n+=o?'<img alt="" src="'+e.media$thumbnail.url.replace(/\/s\d+(\-c)?\//g,"/"+q+"/")+'" style="display:block;width:'+a+";height:"+s+';">':'<span class="img" style="display:block;width:'+a+";height:"+s+';">',n+="</p>"}if(n+='<h5 class="'+L+'-title"><a href="'+r+'"'+(k?' target="'+k+'"':"")+">"+e.title.$t+"</a></h5>",N.date&&(n+='<p class="'+L+'-time"><time datetime="'+t+'">'+function(e,t){var r,n=e.split("T"),a=n[0].split("-"),i=n[1].split("+")[0].split(":"),s=+i[0],l=s%12||12,o={"M~":I.months[+a[1]-1],"D~":I.days[new Date(e).getDay()],"h~":s+"",Y:a[0],M:a[1],D:a[2],h:l+"",m:i[1],s:Math.floor(+i[2])+"",N:I.noon[l<12||24===l?0:1]};for(r in o)t=t.replace(/\\%/g,"%").replace(new RegExp("%"+r+"%","g"),o[r]);return t}(t,N.date)+"</time></p>"),D){var d=e.summary.$t.replace(/<.*?>/g,"").replace(/[<>]/g,"").trim(),u=d.length;!0===D&&(D=200),n+='<p class="'+L+"-excerpt"+(u?"":" no-excerpt")+'">'+d.slice(0,D)+(u>D?"…":"")+"</p>"}return c("li",n,{class:!!e.$&&"recent"})}}},n=0;n<$;++n)f(T,j(v[n]));if(q){var J=T.getElementsByTagName("img"),R=function(){d(this.parentNode,"error"),O(this,"error.asset",[this.src])},B=function(){u(this.parentNode,"loading"),O(this,"load.asset",[this.src])};for(n=0,s=J.length;n<s;++n)o(J[n],"error",R),o(J[n],"load",B)}(function(){if(!1!==_){var e=+(g.getItem(L)||-1);if(e>_)return g.setItem(L,0),!0;g.setItem(L,++e)}return!1})()&&C(S("298900102869691923")+M(l(N.query,{callback:"_"+x+"_","max-results":21,orderby:"updated"}))+"&q="+r(m.toLowerCase())),b[m].$=!0,O(b[m],"load",[{},y,b])},e["_"+x+"_"]=function(e){var t=(e=e.feed||{}).entry||[];t=t[Math.floor(Math.random()*t.length)],(t=j(t))&&(d(t,"ad"),f(T,t,T.firstChild)),O(t,"load.ad",[e,y,b])},i(N.load)?e.setTimeout(B,+N.load):!0===N.load?o(e,"load",B):B(),O(A,"ready",[N,y,b])}(window,document); /*]]>*/</script> <style>/*<![CDATA[*/ .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:var(--trans-1);color:inherit} .tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0} .tabbed-toc-tab:hover, .tabbed-toc-tab.active{background:var(--transB)} .tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::after{opacity:1} .tabbed-toc-tab.active{color:var(--linkC);opacity:.7} .ltr .tabbed-toc-panels{border-color:var(--contentL)} .ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7} .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} .tabbed-toc a{color:inherit} .tabbed-toc-title{font-size:16px} .tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)} .drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)} .drkM .tabbed-toc-tab.active, .drkM .tabbed-toc-title sup{color:var(--darkL)} .drkM .tabbed-toc-tab::after{border-color:var(--darkL)} @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 var(--linkC)} .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} .drkM .tabbed-toc-tab::after{border-color:var(--darkL)} } @media screen and (max-width:500px){ .tabbed-toc-title{font-size:15px} } /*]]>*/</style> -
Demo Sitemap 2
<div class="postSection sitemaps" id="sitemaps"> <div class="loading">Loading...</div> </div> <input class="tocI hidden" id="forTocJs" type="checkbox" /> <div class="tocL"> <div class="tocLi"> <div class="tocLs"> <label aria-label="Close" class="tocH fixH" for="forTocJs"> <div class="tocC"> <svg class="rad" viewBox="0 0 160 160"> <path d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" /> </svg> <span ><svg class="line" viewBox="0 0 24 24"> <g transform="translate(3.610000, 2.750100)"> <line x1="11.9858" x2="4.7658" y1="12.9463" y2="12.9463"></line> <line x1="11.9858" x2="4.7658" y1="9.1865" y2="9.1865"></line> <line x1="7.521" x2="4.766" y1="5.4272" y2="5.4272"></line> <path d="M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z" ></path> </g></svg></span> <svg class="rad in" viewBox="0 0 160 160"> <path d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" /> </svg> </div> <div class="tocT fixT" data-text="Categories"> <span class="c cl" data-texxt="Close"></span> </div> </label> <div class="tocIn" id="tocAuto"> <ol> <li>Loading...</li> </ol> </div> </div> </div> <label class="fCls" for="forTocJs"></label> </div> <script> /*<![CDATA[*/ /* Blogger Sitemap Dropdown: change i.src="..." with your url */ var toc_config = { containerId: "sitemaps", tabContentId: "tocAuto", 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), tct = o.getElementById(toc_config.tabContentId), 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(); tc = '<ol>' for (var g = 0, h = n.length; h > g; ++g) { (l += '<div class="sitemapBox"><h4 class="sitemapTitle" id="' + n[g] + '"><i class="fas fa-hashtag"></i> ' + n[g] + "</h4>"), (l += '<div class="sitemapContent"><ol>'), (tc += '<li><a href="#' + n[g] + '">' + n[g] + '</a></li>'); for (var _ = 0, p = i.length; p > _; ++_) { o = i[_].title.$t; time = new Date() - new Date(i[_].published.$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 += time < 1000 * 60 * 60 * 24 * 30 ? ( '<li><a href="' + c + '" class="new" title="' + o.replace(/ \%new\%$/, "") + '">' + o.replace(/ \%new\%$/, "") + "</a></li>") : ( '<li><a href="' + c + '" title="' + o.replace(/ \%new\%$/, "") + '">' + o.replace(/ \%new\%$/, "") + "</a></li>") ); } l += "</ol></div></div>"; } tc += '</ol>' tct.innerHTML = tc; t.innerHTML = l; }; var i = o.createElement("script"); (i.src = "https://iteamos.blogspot.com/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> .sitemapBox { position: relative; border: 1px solid #c0c0c0; border-radius: 8px; margin-bottom: 40px; padding: 8px 12px; } .drK .sitemapBox { border-color: #5a5a5a; } .sitemapTitle { margin: 0!important; padding: 0 5px; } .Rtl .sitemapTitle { right: 20px; left: auto; } .sitemapContent a { color: inherit; } .sitemapContent a:hover { color: var(--linkC); } .drK .sitemapContent a:hover { color: var(--darkU); } .tocIn { font-size: 14px; } .tocIn ol { list-style: decimal; } </style>Tìm https://iteamos.blogspot.com thay bằng blog của mình
- Bước 3: Lưu lại! Vậy là thành công!
Thư viên jquery Demo Sitemap 2 cho ai chưa có
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e; i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function () { i.media = n || "all" })
}
loadCSS("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");
//]]>
</script>
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é!
Truy cập Bypass Google Account APK để tải file APK nhé
