Menampilkan Image dalam Efek Zoom Image

"MAAF ADA KESALAHAN DIKIT UNTUK CODINGNYA TAPI SUDAH BANDIT REFISI BACA DISINI "




Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari banditz he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah banditz jalan-jalan ke Dynamic Drive CSS Library. Dan udah teruji secara klinis heheheh seperti yang banditz terapkan di www.kraksaan-online.com demo http://www.kraksaan-online.com/2010/07/pemenang-kupon-undian-berhadiah.html

Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.

* Login ke account blogger kamu.
* Pilih Tata Letak --> Edit HTML.



Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.


/* Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

Simpan template kamu
Cara penggunaan :
Kode HTML untuk image zoom.

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6tU4pnQvHXtpQYijH_fcYOfqbO62Opm0CmmX_RiQJXtIsTh65rarb4GvhZXa7ECzCIxBErXxzVxhpRY-QsglvolZ43KRiXhWzivoyEzAEKTiWzRUri0FRPJk0ytctK-GZ2pkl7qz3B8/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6tU4pnQvHXtpQYijH_fcYOfqbO62Opm0CmmX_RiQJXtIsTh65rarb4GvhZXa7ECzCIxBErXxzVxhpRY-QsglvolZ43KRiXhWzivoyEzAEKTiWzRUri0FRPJk0ytctK-GZ2pkl7qz3B8/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.

<a class="thumbnail" href="#thumb">Icon OB<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIYkYx9Z2SrjESMCKsaFnu1Wb9rGx8OShdjsJY8S4RYcIQkdPu0dy02aOrfDEvP7p5brHkeMWv3hftMYx0JlMowinYyykqsqHAStaXSkNogZA6rk0c29urZhhVaz2SSp36wAn1XpEaJ20/s144/Chicklet%20OB2.png" /></span></a>



Catatan :

1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu
tampilkan.
2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan
menampilkan efek zoom.
3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan
image.
4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).


Selamat menampilkan image dalam zoom efek...