Cara Membuat Label Blog dengan Thumbnail

Banyak cara-cara atau tutorial untuk mempercantik Blog agar blog tampil profesional, diantaranya membuat Thumbnail sendiri, tapi kali ini saya akan memposting Cara Membuat label blog dengan thumbnail.
Trik ini saya dapatkan dari Blogger miscah. Jadi konsepnya seperti recent post dengan thumbnail (Baca:Membuat Recent Posts Cantik ). Namun, kali ini yang diberi thumbnail adalah post tertentu dalam satu kategori

Langkahnya,

1. Masuk ke akun blogger
2. Buka design/rancangan
3. Pilih Edit HTML
4. Copy kode barikut, dan paste di atas kode sebelum kode ]]></b:skin> : 
   
   /---Image-Label---/
   img.label_thumb {
   float:left;
   padding:3px;
   background:#CCC;
   border:1px solid #A4A4A4;
   width:100px;
   height:75px;
   margin-right:10px;
   margin-top:10px }
   img.label_thumb:hover {
   opacity:0.8;
   filter:alpha(opacity=80);
   -moz-opacity:0.80;
   -khtml-opacity:0.8 }
   
   Keterangan: silahkan modifikasi sendiri warna backgroundnya, lebar dan tingginya (ubah angka di width, dan height)
   
5. Copy juga kode berikut, dan paste kode dibawah / setelah kode ]]></b:skin> : 
   
   <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_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   </script>
6. Simpan Template
7. Sekarang buka Page Elemen/Elemen Laman
8. Klik pada "Tambahkan Gadget / Add Gadget Element"
9. Pilih HTML/Javascript
10. Paste kode barikut
    
    <script type='text/javascript'>var numposts = 6;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/SEO?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    
    Keterangan: Silahkan sesuaikan sendiri jumlah posting (thumnail) yang ditampilkan, ubah angka "6". Dan yang warna merah "SEO" ganti dengan nama labelnya. Mudah
11. Simpan