Cara Menampilkan Postingan Berdasarkan Label dengan Gambar atau Thumbnails

Sebenarnya postingan kali ini masih ada kaitannya dengan postingan sebelumnya yang membahas tentang Cara Menampilkan Postingan Berdasarkan Label. Sebenarnya kegunaan dari apa yang akan di bahas kali ini pun sama, yakni menampilkan postingan tertentu berdasarkan label atau kategori pada gadget side bar atau footer. Bedanya dengan tutorial kali ini yakni cara menampilkan postingan berdasarkan label dengan gambar adalah pada cara berikut ini nantinya yang ditampilkan bukan judul postingan, melainkan gambarnya.

Untuk cara berikut biasanya digunakan untuk blog yang banyak menampilkan gambar seperti blog desain grafis, fotografi atau portal berita online atau majalah online lainnya. Pokoknya cara ini sangat cocok untuk menghias blog Anda agar lebih ramai dengan gambar dan memudakan orang yang mengakses blog Anda menemukan informasi lain di blog Anda dengan mudah. Maka dari itu berikut adalah cara menampilkan postingan berdasarkan label dengan gambar:

1. Login terlebih dahulu ke blog Anda
2. Langsung masuk saja ke halaman "Tata Letak"

3. Tambahkan widget / gadget dengan cara klik "Add Gadget / Tambahkan Gadget"

4. Pilih gadget/widget dengan tipe HTML/JavaScript
5. Copy-Paste atau masukkan kode di bawah ini ke dalamnya

<style>
/*Katagori Gambar*/
img.label_gambar{
float:left;
padding:5px;
width:120px;
height:120px;
margin-right:1px;
margin-bottom:1px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_gambar" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts =4;</script>
<script type="text/javascript" src="/feeds/posts/default/-/laris?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

6. Ubahlah kode yang dicetak merah di atas sesuai dengan keinginan dan kondisi Blog Anda. Adapun penjelasan dari kode tersebut adalah sebagai berikut:

width:120px; adalah lebar gambar yang akan ditampilkan
height:120px; adalah tinggi gambar yang akan ditampilkan
var numposts =4 adalah jumlah postingan yang akan ditampilkan
default/-/laris? adalah judul label yang akan Anda masukkan, nama label harus persis dan sama termasuk huruf kapitalatau tidaknya.