CARA MEMBUAT LABEL DENGAN THUMBNAIL HOVER

Cara Membuat Label Dengan Thumbnail Hover. yups kali ini saya akan share mengenai Cara Membuat Label Dengan Thumbnail Hover. Pada belum pernah denger???? hahahaha.....

Tapi sekarang dah denger kan??? hehehehe iya... tips blogging kali ini adalah tips untuk menampilkan widget label dengan tampilan Thumbnail Hover. klo belum tau tampilannya sobat bisa lihat contohnya di http://www.mybloggerthemes.com/



Gimana ???? sobat tertarik??? ok deh langsung saja pada langkah-langkahnya

Langkah-langkah Cara Membuat Label Dengan Thumbnail Hover
1. login blog
2. rancangan -> edit HTML
3. cari kode ]]></b:skin>
4. taruh kode dibawah ini diatas 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 }

sobat bisa rubah angka yang berwarna merah untuk mengubah tinggi dan lebarnya.

5. taruh script dibawah ini dibawah 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>

6. simpan template
7. lalu buka Elemen halaman
8. tambah gadget -> HTML/JavaScript
9. lalu masukkan kode dibawah ini

<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>

NB : angka 6 berarti banyaknya label yang akan muncul.
.
Selamat Mencoba .....
          Semoga Berhasil .....