Tampilkan Gambar dengan zoom effect

Pernahkah kamu main-main ke blog lain trus ketika mouse diarahkan ke sebuah gambar tapi tiba-tiba gambarnya membesar...? Efek ini disebut Zomm Effect.
Nah kali ini kita coba membuat efek seperti itu.

Langkah I:
1. Login ke Blogger
2. Pilih menu "Tata Letak - Edit HTML"
3. Cari kode dibawah ini:

]]></b:skin>

4. Masukan kode dibawah ini tepat diatas kode ]]></b:skin>

.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;}

5. Simpanlah template...

Langkah II:
Modifikasi kode pada gambar artikel:
1. Masukan sebuah gambar pada artikel
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 merah).

* Tambahkan kode pengulangan yang diapit <span>kode gambar</span> pada akhir kode gambar (lihat contoh dibawah warna merah).

* 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=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIf-2Y3SvrPAGkYHaZm-GOMR9Hu3y5O836l6q3r3J5Lu1JyT1LHR1ppYHpWv07-_tzsVkDEnR8dSc9cWrIx1WStV0rydH4PTXhS-sPsUPYGstgJnveL4crP47UIeiNso1zBE0Gyvxf1OY/s1600-h/8.jpg” class="perbesar"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 140px; height: 93px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIf-2Y3SvrPAGkYHaZm-GOMR9Hu3y5O836l6q3r3J5Lu1JyT1LHR1ppYHpWv07-_tzsVkDEnR8dSc9cWrIx1WStV0rydH4PTXhS-sPsUPYGstgJnveL4crP47UIeiNso1zBE0Gyvxf1OY/s320/8.jpg" alt="" id="BLOGGER_PHOTO_ID_5435026220814507330" border="0" /><span><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIf-2Y3SvrPAGkYHaZm-GOMR9Hu3y5O836l6q3r3J5Lu1JyT1LHR1ppYHpWv07-_tzsVkDEnR8dSc9cWrIx1WStV0rydH4PTXhS-sPsUPYGstgJnveL4crP47UIeiNso1zBE0Gyvxf1OY/s1600/8.jpg”></span></a>

3. Publish artikel...!

Related Posts