Blog Geisha

Cara Membuat Label Dengan Gambar/Thumbnail Hover - Pada kesempatan kali ini Kang Koisine akan memberikan tutorial blogger mengenai cara membuat label pada blog tampil hanya gambar/thumbnail saja. Jika sebelumnya label tampil dengan text dan tulisan saja kali ini saya akan memberikan label yang tampil hanya dengan gambar. Tampilan yang dihasilkan cukup simple dan menarik dan baik untuk memikat pengunjung.

Gambar akan muncul jika terdapat gambar pada artikel sobat, dan Anda perlu memperhatikan jenis tulisan , besar dan kecil rulisan label karena, jika tulisan salah walaupun besar dan kecil tulisan label gambar tidak akan muncul dan kosong.

Berikut ini contoh tampilan Label Dengan Gambar/Thumbnail Hover

Label Dengan Gambar/Thumbnail Hover

Gambar yang sederhana dan simple memberikan kesan baik untuk blog Anda dan menjadikan blog lebih modif menarik baik tampilan maupun pengunjung. Jika Anda tertarik dengan trik ini silahkan masuk ke Template => Edit HTML. Untuk menghindari kesalahan backup dahulu template Anda atau melanjutkan ke tahap berikut,

• Letakan kode CSS di bawah ini 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
}

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

• Kemudian tambahkan kode Script di bawah ini sebelum kode </head>

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

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

Angka 6 => Jumlah Label Gambar yang tampil.
Template => Nama Label yang akan ditampilkan.

• Simpan.