Membuat Label Thumbnail

Seputar Blog,

Pilihan label yang selama ini sering kita jumpai di blogger umumnya hanya berupa tulisan saja dan itupun sudah ada dalam fasilitas menu di blogger dimana kita bisa membuat label disidebar dengan hanya menambahkan gadget saja dan muncul otomatis. adapun thumbnail hanya ada dibagian popular post atau recent pos saja dalam sidebar blogger.

Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan ?

Caranya adalah dengan manambahkan sedikit kode css dan javascript didalam template maka label dengan thumbnail akan menghiasi blog kita. berikut adalah cara / tutorial blog tentang membuat label dengan thumbnail hover. Untuk memulai menambahkan code css dan javascript, ada baiknya kita backup dahulu templatenya dengan masuk ke Rancangan –> Edit HTML –> Download Template Lengkap.

1. Tambahkan kode css dibawah ini tepat diatas dan atau sebelum kode ]]></b:skin> : 
   img.label_thumb {
   float:left;
   padding:4px;
   background:#CCC;
   border:2px solid #A4A4A4;
   width:110px;
   height:100px;
   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 }
2. Kemudian tambahkan kode script dibawah atau tepat 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>
3. Simpan Template dan masuk ke Elemen Laman –> Tata Letak
4. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
5. Kemudian masukkan kode berikut kedalamnya :
   <script type='text/javascript'>var numposts = 5;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Keluarga?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, yang bisa disesuaikan dengan lebar widget template yang ada diblog kita.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan dan bisa di ganti sesuai keinginan kita.
• Sedangkan tulisan yang berwarna merah untuk label yang akan ditampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Semoga bermanfaat.