Cara Membuat Efek Thumbnail Hover Preview di Blog

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