Cara Menciptakan Sitemap Blog Responsive Dan Keren

Baca Juga

Sitemap ialah 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 menentukan artikel lain yang ingin mereka baca.

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

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

Tidak semua template dapat memakai instruksi sitemap ala kompiajaib dengan instruksi yang sama. Jika kau mengalami hal ini, maka kau dapat mencoba memakai instruksi sitemap blog berikut:

 <style scoped="scoped" type="text/css"> #tableouter{padding:7px 10px;margin:0 auto} #tableouter table{width:auto;margin:0 auto} #tableouter form{font:inherit} #tableouter label{display:block;textalign:left;margin:0 10px 0 0;padding:4px 0 0} #tableouter selectdisabled{opacity:.4} #postsearcher{display:block;margin:0;padding:0} #tableouter input,#tableouter select{width:100%;border:none;margin:0;padding:5px;fontsize:86%;texttransform:uppercase;outline:0;webkitboxshadow:inset 0 1px 3px #000,0 1px 0 #444;mozboxshadow:inset 0 1px 3px #000,0 1px 0 #444;boxshadow:inset 0 1px 3px #000,0 1px 0 #444;webkitboxsizing:contentbox;mozboxsizing:contentbox;boxsizing:contentbox} #feedcontainer{display:block;clear:both;padding:0 10px;padding:0;liststyle:none;overflow:hidden;position:relative;bordertop:none;} #feedcontainer li{liststyle:none;margin:0;padding:0;bordertop:1px solid #eee;color:#555;width:200px;float:left;display:inline} #feedcontainer li .inner{margin:15px 16px;height:200px;width:200px; overflow:hidden;wordwrap:breakword;textoverflow:ellipsis;textalign:center;} #feedcontainer li a{textdecoration:none;color:#2C2C2C;fontweight:700} #feedcontainer li a:hover{textdecoration:none;color:#E94141} #feedcontainer li .newstext{display:none!important} #feedcontainer li img{margin:0 10px 5px 0;padding:5px;float:none;display:block;} #resultdesc{margin:0 30px;padding:0;borderbottom:2px solid #eee} #resultdesc div,#resultdesc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52} #resultdesc div{color:inherit} #feednav{margin:10px 30px 0;textalign:center;fontweight:700} #feednav a,#feednav span{border:1px solid #C9C9C9;padding:0;color:#757575;textdecoration:none;display:block;height:30px;lineheight:32px} #feednav a,#feednav span:hover{color:#1B1B1B} #feednav a:active,#feednav a:hover{color:#555} #feednav span{cursor:wait} @media (maxwidth:667px){ #tableouter table{margin:0 auto;width:100%} #feedcontainer,#tableouter{margin:0 auto} #feedcontainer li .inner {height: 280px;margin: 10px;width: auto;} #feedcontainer li {border:1px solid #EEEEEE; display:block;float:left;height: 290px;margintop: 5px;padding: 0px;width: 32%;} #feedcontainer li .newstext, #feedContainer:after,{display:none!important} } @media (maxwidth:414px){ #feedcontainer li { border: 1px solid #EEEEEE;float:left;height:280px;marginbottom:10px;padding:5px;width:45%;} #feedcontainer li .inner {width:auto;} } @media (maxwidth:320px){ #feedcontainer{padding:35px;} #feedcontainer li .inner {height:auto; margin:5px auto;width:82%} #feedcontainer li{width:auto;border:1px solid #EEEEEE;marginbottom:7px} #feedcontainer li img {margin:0px;paddingleft: 5px;} } </style> <div id="tableouter"> <table><tbody> <tr><td><label for="feedorder">Urutkan Artikel berdasarkan:</label></td> <td><select id="feedorder"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr> <tr><td><label for="labelsorter">Filter Artikel menurut kategori:</label></td> <td><select disabled="" id="labelsorter"> <option selected="">Loading....</option> </select></td></tr> <tr> <td><label for="feedq">Cari Artikel dengan kata kunci:</label></td> <td><form id="postsearcher"> <input id="feedq" type="text" />  </form> </td></tr> </tbody></table> </div> <header id="resultdesc"></header>   <ul id="feedcontainer"></ul> <div id="feednav"> </div> <script type="text/javaScript"> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://mamankdzgn.blogspot.com/",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('feedorder'),b:el('labelsorter').parentNode,c:el('postsearcher'),d:el('feedq'),e:el('resultdesc'),f:el('feedcontainer'),g:el('feednav'),h:d.getElementsByTagName('head')0,i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporerscript');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporerscript";script.src=param;if(el('temporerscript'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfgmode==1?"searching":"loading";if(mode===0){fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary//'+ tag+'?alt=jsoninscript&startindex='+((o.i*cfg.maxResults)+ 1)+'&maxresults='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=jsoninscript&startindex='+((o.i*cfg.maxResults)+ 1)+'&maxresults='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.homePage+'/feeds/posts/summary?alt=jsoninscript&startindex='+((o.i*cfg.maxResults)+ 1)+'&maxresults='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children0.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=ai.title.$t;_d=("summary"in ai)?ai.summary.$t.replace(/<br ?/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in ai)?ai.media$thumbnail.url.replace(//s09+c/,"/s"+ cfg.thumbWidth+""):cfg.noImage.replace(//s09+c/,"/s"+ cfg.thumbWidth+"");for(var j=0,jen=ai.link.length;j<jen;j++){c=(ai.linkj.rel=="alternate")?ai.linkj.href:"#";} for(var k=0,ken=ai.link.length;k<ken;k++){if(ai.linkk.rel=="replies"&&ai.linkk.type=="text/html"){e=ai.linkk.title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"> <img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="Sitemap ialah halaman yang wajib ada dalam blog Cara Membuat Sitemap Blog Responsive dan Keren"><a class="toctitle" href="'+ c+'" target="_blank" title="Cara Membuat Sitemap Blog Responsive dan Keren">'+ b+'</a><div class="newstext"> '+ _d+'&hellip;<br style="clear:both;"></div> </div> ';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#loadmore';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#resetcontent';_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.children0.innerHTML=o.b.children0.innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children0.disabled=false;},e:function(json){var a=json.feed.category,b='<select id="labelsorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(ai.term)+'">'+ encodeURIComponent(ai.term)+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children0.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=jsoninscript&startindex='+(o.i+ 1)+'&maxresults='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/feeds/posts/summary?alt=jsoninscript&maxresults=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children0.innerHTML=o.b.children0.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:

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

Kode sitemap tidak dapat diperbaiki pribadi di editor halaman blog. Makara kalau kau memperbaiki instruksi tertentu dan mengupdate maka kodenya tidak akan bekerja. Jika ingin mengedit, copy semua kodenya keluar (notepad++) lalu kalau telah selesai copy lagi kodenya semua ke halaman dan update.

Selesai.