Cara Membuat Sitemap Blog Keren dengan Thumbnail dan Responsive

Halo teman-teman, dah lama ni ngak nulis artikel yang berhubungan dengan CSS, Javascript dan HTML. Nah, pada kesempatan kali ini saya mencoba memodifikasi sekaligus merubah bentuk tampilan Sitemap yang sebelumnya pernah saya tulis dengan judul ( Cara membuat SiteMap Blog Terbaru dan Responsive ), Sitemap yang saya tulis sebelumnya menampilkan gambar, judul serta deskripsinya.

Nah, untuk sitemap ini saya hanya menampilkan gambar dan judulnya saja. Selain itu, modifikasi sitemap ini lebih menonjolkan sisi thumbnailnya, sehingga bentuk gambar terlihat jelas.

Untuk model responsive pada sitemap ini juga sudah saya desain sebaik mungkin, sehingga saat dibuka dalam ukuran apapun akan terlihat jelas dengan bentuk yang pas. Oke, tanpa basa-basi, bagi yang berminat silahkan ikuti langkah-langkah berikut ini.

1. Masuk ke menu Dasbor
2. Buat baru atau edit tempat Sitemap sebelumnya
3. Pilih menu HTML bukan compose
4. Copy dan paste kode di bawah ini

Salin/paste kode yang sudah sobat copy pada menu HTML, bukan menu Compose (important !)

<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:270px;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" /><br />
</form> </td></tr>
</tbody></table> </div> <header id="result-desc"></header><br />
<ul id="feed-container"></ul> <div id="feed-nav"> </div><br />

<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"http://www.terwujud.com",maxResults:12,numChars:0,thumbWidth:200,thumbHeight:200,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>

5. Klik Publish/Perbaharui dan lihat hasilnya

KETERANGAN

• Tulisan yang berwarna Merah, silahkan ganti dengan kata-kata sobat sendiri
• Tulisan yang berwarna Kuning, silahkan ganti dengan URL alamat blog sobat
• maxResults:12 (Jumlah artikel yang tampil)
• numChars:0 (keterangan/deskripsi artikel, sebaiknya biarkan nol saja )
• thumbWidth:200,thumbHeight:200 (bisa sobat sesuaikan lebar dan tinggi thumbnailnya)

^^ Mungkin ini saja yang bisa saya sajikan, jika ada keluhan bisa ditanyakan langsung melalui form komentar di bawah ini atau melalui menu kontak saya.