Cara Membuat Sitemap Berdasarkan Label Tertentu di Halaman Statis Blog

Salah satu hal yang menjadi dilema blogger dalam hal seo adalah tentang url label. Kebanyakan jika kita tes menggunakan tools seo akan mendapatkan peringatan url tidak seo. Hal itu karena url label di blogger bentuknya seperti ini https://www.namablog.com/search/label/nama-label?&max-results=16.

Sebenarnya ini adalah trik lama dan sudah ada juga di google. Namun kebanyakan saya cek di google menggunakan js eksternal yang bisa menimbulkan render-blocking. Sehingga akan membuat halaman menjadi lambat.

Pada tutorial ini saya akan membagikan cara yang sedikit berbeda. Cara ini juga tidak akan membuat pagespeed menurun. Untuk demonya silahkan cek pada menu blog ini (jika saya belum menggantinya lagi).

Oke langsung saja buat Anda yang ingin menggunakan model sitemap berdasarkan label tertentu dihalaman statis blog, silahkan ikuti langkah-langkahnya berikut ini:

1. Copy css berikut, dan letakkan di atas tag /head


<b:if cond='data:blog.url in {&quot;https://www.tipsdantrik.web.id/p/blog.html&quot; , &quot;https://www.tipsdantrik.web.id/p/adsense.html&quot; , &quot;https://www.tipsdantrik.web.id/p/seo.html&quot; , &quot;https://www.tipsdantrik.web.id/p/template.html&quot;}'>
<style>
#feed-container,#feed-container li{list-style:none;margin:0;padding:0}#table-outer{padding:7px 10px;margin:0 auto}#table-outer table{width:auto;margin:0 auto}#table-outer form{font:inherit}#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#table-outer select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#table-outer select option{min-height:1.4em!important}#table-outer input#feed-q{padding:5px 10px!important}#feed-container{background:#fff;display:block;clear:both;overflow:hidden;position:relative;border-top:none}#feed-container li{color:#555;width:auto;float:left;display:inline}#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}#feed-container li a:hover{text-decoration:none;color:#E94141}#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}#feed-container,#table-outer{margin:0 auto}#feed-container li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#feed-container li .news-text,#feed-container li img,#feedContainer:after{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AQYiuDOzCWzGx_DgRn_oCXMj8GakKYWZMkqhduLry7V4jHQgx1x0mXSUp1gNENhJkkN2NtBP1AAN_UguBb8qST2kgA0CBPQQg0ZucDrGbuBGgvkpUVBhrnzeRBpQnumsSgH0zhReHns/w220-h19-no/ajax-loader+%25281%2529.gif) 50% 50% no-repeat!important}
</style>
</b:if>

2. Kemudian copy script di bawah ini, letakkan di atas /body.


<b:if cond='data:blog.url in {&quot;https://www.tipsdantrik.web.id/p/blog.html&quot; , &quot;https://www.tipsdantrik.web.id/p/adsense.html&quot; , &quot;https://www.tipsdantrik.web.id/p/seo.html&quot; , &quot;https://www.tipsdantrik.web.id/p/template.html&quot;}'>
<script>
//<![CDATA[
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"https://"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-WquCwy-g_SsAxQ7pVKTtCHtrcZWJAE9N7hB2pPGZ_wzHVcHlpdWOZSsaTGPp6H0mA8wLpbuxXnzL-4fsH7TY8PRYsHkswhN_rcZ4178HdPtJRMoqPS7DUsbtZ5h_k9xChT_nQWEgPg/s1600/tipsdantrikwebid-or8.png",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>
</b:if>

3. Buat halaman statis per label. Misalnya untuk label "blog". Buat halaman statis baru, berikan judul sesuai label yaitu "Blog". Kemudian letakkan html berikut pada postingan mode HTML.


<div id="result-desc">
</div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script>
var label="Blog";
</script>

Pastikan nama label yang saya tandai sudah sesuai dengan nama label blog (perhatikan huruf besar kecilnya). Jika sudah silahkan publish dan copy url halaman tersebut.

4. Silahkan ganti url halaman statis pada langkah 1 dan 2 sesuai dengan url halaman statis yang Anda buat.

Cara di atas jika Anda mempunyai 4 menu halaman statis, jika lebih cukup tambahkan tanda koma (,) sebagai pemisah dan tambahkan urlnya seperti ini:


 , &quot;URL HALAMAN STATIS1&quot; , &quot;URL HALAMAN STATIS2&quot; dan seterusnya.

Pastikan blog feednya diubah menjadi short. Kemudian jika ingin url halaman statisnya sesuai judul, maka ketik terlebih dahulu judulnya baru postingannya.