Membuat Label untuk Artikel Miniatur Hover

Label yang selama ini sering kita jumpai bentuknya hanya berupa tulisan saja, itupun sudah ada dalam fasilitas menu di blogger. Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? caranya sangat mudah, hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat. Kali ini saya coba berikan tutorial blogtentang label dengan thumbnail hover.

Untuk demo sobat bisa lihat di mybloggerthemes.com yang terletak di bagian tengah bawah, dimana thumbnail yang muncul akan sesuai dengan label yang kita pasang. Penulisan label juga harus sesuai dengan yang ada di blog sobat, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat backup terlebih dahulu templatenya dengan masuk ke Rancangan –> Edit HTML –> Download Template Lengkap.

1. Tambahkan kode css berikut diatas / sebelum kode ]]></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 / 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.
4. Masuk ke Elemen Laman –> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadgetdan 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/-/Magazine?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.

Sekian saja tips dari saya, semoga bermanfaat. 

Artikel Terkait: