Membuat Label Dengan Gambar

Label merupakan item-item yang ada pada blog sobat, selama ini label yang sering sobat temukan berupa tulisan saja, bagaimana jika membuat label dengan thumbnail  (gambar) dari postingan sobat. 

Untuk demo sobat bisa lihat di mybloggerthemes.com yang terletak di bagian tengah bawah, dimana thumbnail yang muncul akan sesuai dengan label posting sobat. 

Dah tidak sabar nic ceritanya nyoba membuat label dengan thumbnail :

Login –> Rancangan –> Edit HTML –>  [ ceklis ] Expand Template Widget & Download Template Lengkap.

1. Tambahkan kode css berikut diatas ]]></b:skin> : 
   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 }
2. Kemudian tambahkan kode script berikut dibawah ]]></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.
4. Masuk ke Elemen Laman –> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
6. Kemudian masukkan kode berikut kedalamnya :
   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Modifikasi Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
• Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku