Cara Menciptakan Sitemap Blog Responsive Dan Keren

Cara Menciptakan Sitemap Blog Responsive Dan Keren

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 isyarat sitemap ala kompiajaib dengan isyarat yang sama. Jika kau mengalami hal ini, maka kau dapat mencoba memakai isyarat 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;

 <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 menurut 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://ayomaintrading.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('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="Sitemap ialah halaman yang wajib ada dalam blog Cara Membuat Sitemap Blog Responsive dan Keren"><a class="toc-title" href="'+ c+'" target="_blank" title="Cara Membuat Sitemap Blog Responsive dan Keren">'+ 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:

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

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

Selesai.
Sumber https://www.tipsdantrik.web.id/