LABEL DENGAN THUMBNAIR HOVER

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

http://miscah.blogspot.com/2011/06/membuat-label-dengan-thumbnail-hover.html