Membuat Label Dengan Thumbnail Hover

Post info

Label:


Comments 1


Author: nius blog

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

1 komentar:



  1. Hermawan Ady Prayoga

    maaf saya binun :D

Posting Komentar