Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot

Image atau gambar yang ditampilkan di blog terkadang ditampilkan kecil karena untuk menghemat di halaman blok, sehingga untuk pembaca yang ingin melihat nya harus klik preview atau memperbesar halaman blog. Guna mengatasi kesulitan diatas, maka dibuat  efek untuk memperbesar gambar jika gambar terkena kursor mouse (mouse over).

Efek ini hanya digunakan pada widget bukan di postingan. Caranya sebagai beikut:

1. Login Blogger

2. Klik Tata Letak

3. Pilih lokasi yang akan ditambahkan gambar.

4. Kemudian pilih Tambah Gadget

5. Pilih Htlm/ Javasript

6. Masukkan kode dibawah ini.

<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="URL gambar 1" alt="norman-k" /><img src="URL gambar 1" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="URL gambar 2" alt="udin-s" /><img src="URL gambar 2" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src="URL gambar 3" alt="justin-b" /><img src=" URL gambar 3" alt=" justin-b" class="preview" /></a></li>
</ul>

Note :
Yang diberi warna merah adalah link gambar. Sobat bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri ya sesuai kebutuhan.

Cukup sekian tips blog kali ini cara membuat efek thumbnail hover Preview Image di Blogspot.

Posted in: Blogger Tutorial