Membuat Label Dengan Thumbnail Hover

label_thumbnail Label 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 blog tentang label dengan thumbnail hover.

 

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

Sekian saja tips dari saya, semoga bermanfaat.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

23 comments

2 Juni 2011 06.11

Pertamax kah ?
wah bagus2 tak coba mas :)
udh lama nih gk posting ya mas ?

2 Juni 2011 14.16

Ane kedua
Apa ini membuat loading blog jadi berat???
Kalo nggak ane mau coba

2 Juni 2011 20.27

cobain ah...

5 Juni 2011 21.25

wah bagus n... kang miscah boleh numpang bertanya ga ya...? kalau di perbolehkan saya mau nanya ghini nih kang...? saya punya blog di akun gmail yang satu , nah rencananya saya mau mindahin blog saya ini ke akun gmail saya yang satunya lagi , caranya gimana ya , agar domainnya tidak berubah... thanks... ini bloh saya 4detik.blogspot.com

6 Juni 2011 12.58

dari pada penasaran...

test dulu ah....

7 Juni 2011 22.03

ini saya mau terapin baut blog saya... cuman pada label aja..

8 Juni 2011 21.10

Izin cari ilmu bos,
kalau pada judul posting bisa kah

17 Juni 2011 12.05

Info yang bagus, ane praktekan di blog ane deh :)

23 Juni 2011 19.32

maksimal gambar yang bisa di tampilkan cuma 24. cara menambah maksimal gambar gimana?? udah aku ganti angkanya ampe 100 tetep aja yang keluar cuma 24 thumbnail.

26 Juni 2011 01.26

Trm ksh ilmunya mas, Berkah.

13 Juli 2011 21.44

nice info, coba saya semak dulu yah

26 Juli 2011 14.43

wah tapi kok gk sesuai sama yg d atas yah?

visitback+comment2

8 Agustus 2011 22.57

info bagus juragan, perlu di uji coba ya... kunjungi aku di http://s-surya62.blogspot.com/ terima kasih ya salam sukses selalu...buat Juragan dan keluarga

13 Agustus 2011 12.29

kalo postingan yg gk punya gambar gmana gan?

4 November 2011 19.59

langsung praktek !

19 Januari 2012 03.20

thank's bnget sob,

salam kenal.

kumpulan software computer terbaik dan terbaru..

9 Februari 2012 23.01

Artikel yg menarik ..

16 Mei 2012 12.01

tnaks sob, infonya bermanfaat

14 Juni 2012 10.54

Mantep deh scriptnya!

14 Juni 2012 12.56

wah kok ga ngefek deh om yah??

9 Oktober 2012 15.19

menarik seklai tutorialnya
terima ksh

19 Oktober 2012 22.33

cakepp

11 Januari 2013 08.50

Punyaku di coba malah gak nongol...
ada yang tahu sebabnya???

Poskan Komentar

Reader Community

Recent Comments