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 1Login 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;}Langkah 5
.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;}
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
- 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>.
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 :)