Cara Membuat Sitemap Blog Responsive dan Keren

Sitemap adalah halaman yang wajib ada dalam blog. Dengan adanya sitemap ini akan memudahkan pengunjung untuk mengeksplor apa saja artikel yang ada di blog kita. Sehingga pengunjung akan bebas memilih artikel lain yang ingin mereka baca.

Cara membuat halaman sitemap ini bukan murni dari saya, tetap saya menemukan di google juga. Dari blog terwujuddot com, kemudian saya modif sedikit dari segi ukuran thumbnail dan jarak artikel.

Sebenarnya sitemap ini merupakan hasil modifikasi dari sitemap ala kompiajaib yang keren itu. Menampilkan artikel berdasarkan pencarian, label dan artikel terbaru atau yang terakhir di update.

Tidak semua template bisa menggunakan kode sitemap ala kompiajaib dengan kode yang sama. Jika kamu mengalami hal ini, maka kamu bisa mencoba menggunakan kode sitemap blog berikut:


<style scoped="scoped" type="text/css">
#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:left;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:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#feed-container{display:block;clear:both;padding:0 10px;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none;}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:200px;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:200px;width:200px; overflow:hidden;word-wrap:break-word;text-overflow:ellipsis;text-align:center;}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{display:none!important}
#feed-container li img{margin:0 10px 5px 0;padding:5px;float:none;display:block;}
#result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:700}
#feed-nav a,#feed-nav span{border:1px solid #C9C9C9;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:667px){
#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner {height: 280px;margin: 10px;width: auto;}
#feed-container li {border:1px solid #EEEEEE; display:block;float:left;height: 290px;margin-top: 5px;padding: 0px;width: 32%;}
#feed-container li .news-text, #feedContainer:after,{display:none!important}
}
@media (max-width:414px){
#feed-container li { border: 1px solid #EEEEEE;float:left;height:280px;margin-bottom:10px;padding:5px;width:45%;}
#feed-container li .inner {width:auto;}
}
@media (max-width:320px){
#feed-container{padding:35px;}
#feed-container li .inner {height:auto; margin:5px auto;width:82%}
#feed-container li{width:auto;border:1px solid #EEEEEE;margin-bottom:7px}
#feed-container li img {margin:0px;padding-left: 5px;}
}
</style>
<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan Artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter Artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>
<tr> <td><label for="feed-q">Cari Artikel dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" />

</form>
</td></tr>
</tbody></table>
</div>
<header id="result-desc"></header>


<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javaScript">
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://www.tipsdantrik.web.id/",maxResults:12,numChars:0,thumbWidth:200,thumbHeight:100,navText:"Load More &#9660;",resetToc:"Back",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Loading...</span>",counting:"<div>
Sedang Mencari Artikel...</div>
",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');}
o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>
Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>
';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(//s[0-9]+-c/,"/s"+ cfg.thumbWidth+""):cfg.noImage.replace(//s[0-9]+-c/,"/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";}
for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}}
_h=d.createElement('li');_h.innerHTML='<div class="inner">
<img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">
'+ _d+'&hellip;<br style="clear:both;"></div>
</div>
';o.f.appendChild(_h);}
_h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};}
o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term)+'">'+ encodeURIComponent(a[i].term)+'</option>';}
b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();
</script>

Keterangan:

Ganti kode yang warna merah dengan alamat blog kamu
Jika ukuran pixel thumbnail tidak sesuai, silahkan ganti kode yang warna hijau dengan ukuran thumbnail blog kamu.

Kode sitemap tidak bisa diperbaiki langsung di editor halaman blog. Jadi jika kamu memperbaiki kode tertentu dan mengupdate maka kodenya tidak akan bekerja. Jika ingin mengedit, copy semua kodenya keluar (notepad++) kemudian jika telah selesai copy lagi kodenya semua ke halaman dan update.

Selesai.