Cara Membuat Efek Thumbnail Hover Preview di Blog

Thumbnail Hover Preview
Suatu ketika, saya berkunjung ke sebuah situs yang cukup populer untuk membaca postingan terbaru. Situs ini memang menjadi salah satu langganan saya, karena artikel-artikelnya yang menarik. Tapi ketika itu situs tersebut baru direparasi, jadi ada beberapa hal baru yang muncul, dan ada satu yang cukup menarik buat saya. 

Dibawah artikel yang sedang saya baca ada sekumpulan artikel, yaitu artikel-artikel yang terkait dengan bacaan tersebut. Tapi uniknya setiap kali kursor saya dekatkan ke foto yang menjadi thumbnail artikel tersebut, foto tersebut membesar yang fasih dikenal dengan istilah Thumbnail hover preview.

Saya sangat tertarik untuk membuat sekumpulan foto dengan efek Thumbnail Hover Preview, karena memang di blog saya yang satunya mengharuskan ada pajangan foto di side bar untuk dimunculkan. Tapi tentunya saya tidak akan membahas tentang blog saya itu disini. Karena pada kesempatan ini saya ingin berbagai tips, bagaimana membuat efek Thumbnail Hover preview sekaligus foto-foto tersebut bisa dihubungkan pada artikel-artikel di blog anda.
Bagaimana caranya ?
Langkah pertama
Sebaiknya anda memiliki sebuah akun di media-media semacam photobucket/picassa atau yang lainnya agar anda dengan mudah mengambil gambar dari situs-situs tersebut.
Langkah kedua
Pilih foto-foto yang ingin anda tampilkan. Jika anda berniat menghubungkan artikel anda ke foto-foto yang akan diberi efek Thumbnail Hover Preview, sebaiknya anda memilih foto-foto yang konsepnya berhubungan dengan artikel tersebut. Ini agar pengunjung anda memiliki kesan positif dan menganggap anda profesional.
Langkah ketiga
Masuk ke blog anda, klik layout/tata letak
Langkah keempat
Buat gadget HTML/Java Script, kemudian letakan kode script berikut di dalamnya.

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class=”prevthumbhover”>

<li><a href=”#”><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0206_zps4227bef0.jpg” alt=”kute1” /><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0206_zps4227bef0.jpg” alt=”kute1” class=”preview” /></a></li>
<li><a href=”#”><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0215_zps877a3273.jpg” alt=”
kute2” /><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0215_zps877a3273.jpg” alt=”kute2” class=”preview” /></a></li>
<li><a href=”#”><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0269_zps5b960976.jpg” alt=”
kute3” /><img src=” http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0269_zps5b960976.jpg” alt=”kute3” class=”preview” /></a></li>

<li><a href=”#”><img src=”http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0204_zps66633ae4.jpg” alt=”kute4” /><img src=” http://i1339.photobucket.com/albums/o719/nym_artopraph/KUTA%20LOMBOK/_MG_0204_zps66633ae4.jpg” alt=”kute4” class=”preview” /></a></li>
</ul>

Langkah kelima
Ganti link yang diberi warna merah dengan link gambar anda. Jika anda berniat menghubungkan setiap gambar ke artikel anda, ganti # dengan URL artikel anda. Hasil efek Thumbnail Hover Preview akan lebih bagus jika anda menggunakan gambar yang memiliki ukuran yang mendektai bentuk persegi.
Langkah keenam
Save jika semua proses di atas sudah selesai. Anda bisa menempatkan gadget pada posisi yang anda inginkan dengan menggeret gadget tersebut ke posisi yang anda inginkan. Saran saya, tempatkan gadget pada posisi yang memberikan dampak mempercantik tampilan blog anda!
Demikianah tips cara membuat efek Thumbnail Hover Preview di blog anda. Semoga tips ini bermanfaat buat anda.

Salam 

11 thoughts on “Cara Membuat Efek Thumbnail Hover Preview di Blog”

Leave a Reply

Your email address will not be published. Required fields are marked *