0 Cara Membuat Label Dengan Gambar/Thumbnail Hover

Hallo Para Blogger Ketemu lagi nich sama saya
Pada kesempatan kali ini saya akan membuat tutorial tentang bagaimana membuat label dengan gambar Hover, Pada sebselumnya saya juga pernah posting tentang Cara membuat Label berputar(Tag Cloud)
Dengan widget ini label kita bisa lebih rapi dan enak di pandang dan kelihatanya elegant gitu hiihihihihihi.
Waaaah kok malah cerita sendiri jadi kelamaan nanti nungunya
Oke langsung aja kita ke topik pembicaraan

Pertama masuk dulu ke akun Blogger kalian masing-masing
Lalu klik RANCANGAN klik Edit HTML
jangan lupa centang Expand Widget Template atau backup template, 
Lalu cari kode  ]]></b:skin> agar lebih mudah mencari kode tekan ctrl+f
Setelah ketemu letakan kode dibawah ini dan letakan sebelum kode ]]></b:skin>

img.label_thumb {
float:left;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px;
padding:3px
}

Berikut ini keterangan mengenai kode CSS di atas dan sesuaikan dengan blog Anda agar sesuai.

float:left; => Posisi widget (left, center, right)
background:#CCC; => Warna latar belakang
border:1px solid #A4A4A4; => Ukuran bingkai dan warna
width:100px; => Lebar widget
height:75px;  =? Tinggi widget

<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+'"><imgclass="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

• Simpan Template.

Langkah selanjutnya agar Label Gambar tampil pada sidebar blog Anda masuk keTata Letak => Tambah Widget => HTML/Javascript.

• Selanjutnya letakan kode script pemanggilnya di bawah ini

<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/template?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Semoga artikel Cara Membuat Label Dengan Gambar/Thumbnail Hoveryang saya buat, Dapat berguna bagi sobat.