Terwujud

Cara Membuat Sitemap Blog Keren dengan Thumbnail dan Responsive



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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.
Sitemap
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.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 5 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. saya akan coba disemua blog saya pak mudah-mudahan bagus hasilnya

    ReplyDelete
  2. mantap mas bisa dicoba nih. lama nggak mampir kesini nih.

    ReplyDelete
  3. saya sudah coba tapi ada kendala, di awal sudah berhasil tapi pas di cek ulang loading terus tanpa hasil.

    ReplyDelete
  4. Keren, bisa langsung di praktekkan ini mah

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved