Cara Membuat Label Dengan Gambar/Thumbnail Hover

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 buat label dropdown
dengan widget ini label kita bisa lebih rapi dan enak di pandang dan kelihatanya elgant 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+'"><img class="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 ke Tata 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>

Tweet