Tampilkan Gambar dengan Efek Membesar

Beberapa saat yang lalu Blogger TuneUp pernah membahas Blogger Hack dengan judul artikel "Tampilkan Gambar dengan Efek LightBox", kali ini masih berhubungan dengan efek gambar yaitu efek membesar atau sering dikenal dengan nama "Zoom Effect". Biasanya jika kita ingin melihat suatu gambar yang terdapat pada artikel maka kita harus meng-klik gambar tersebut sehingga gambar akan ditampilkan pada link baru dengan ukuran sebenarnya pada browser.

Dengan menggunakan efek membesar ini kita cukup mengarahkan mouse kearah gambar (tanpa klik) dan dengan sendirinya gambar akan tampil seketika pada halaman yang sama dengan ukuran sebenarnya. Efek ini tidak menggunakan kode JavaScript yang rumit, cukup menambahkan beberapa baris kode CSS (cascading style sheet), dan sedikit modifikasi kode pada gambar artikel. Contoh penggunaan Zoom Effect Image silahkan arahkan mouse pada gambar dibawah ini...

Untuk menerapkan efek ini pada blog silahkan ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke tab "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini tepat diatas kode pada Langkah 3:

.perbesar{position: relative; z-index: 0;}
.perbesar:hover{background-color: transparent; z-index: 50;}
.perbesar span{position: absolute; background-color: #80ffff; padding: 5px; left: -1000px; border: 2px solid rgb(192, 192, 192); -moz-border-radius:10px; visibility: hidden; color: black; text-decoration: none;}
.perbesar span img{border-width: 0; padding: 2px;}
.perbesar:hover span{visibility: visible; top: 0; left: 60px;}

Langkah 5
Simpanlah template...

Modifikasi kode pada gambar artikel:
Langkah 1
Masukan sebuah gambar pada artikel
Langkah 2
Masuk ke tab "Edit Html" pada halaman pembuatan artikel

Hal yang harus diperhatikan:

• Kode class="perbesar" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung mengarahkan mouse pada gambar, maka gambar akan ditampilkan dengan efek membesar (lihat contoh dibawah ini, kode class="perbesar" dengan warna biru).
• Tambahkan kode pengulangan yang diapit <span>kode gambar</span> pada akhir kode gambar (lihat contoh dibawah warna biru).
• Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan. Cukup satu kode "-h" pada kode yang dibuang diantara <span>kode gambar</span>.

Contoh modifikasi kode:

Lakukan modifikasi pada kode gambar seperti contoh dibawah ini dengan memperhatikan Langkah 2

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}" href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" class="perbesar"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"><span><img src="http://2.bp.blogspot.com/AAAAB9g/s1600/image.jpg"></span></a>

Langkah 3
Terbitkan artikel...!

Mudah bukan? Selamat mencoba, mudah-mudahan berhasil dan tinggalkan komentar jika mengalami kegagalan. Happy Blogging :)