Menampilkan Image dalam Efek Zoom Image

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 OB he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah OB jalan-jalan ke Dynamic Drive CSS Library. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :




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="http://lh6.ggpht.com/_w3vbLlHM5kg/SbKHhnSNdoI/AAAAAAAAABY/VB8hrsxdHjg/s800/Chicklet%20OB.png" border="0" /><span><img src="http://lh6.ggpht.com/_w3vbLlHM5kg/SbKHhnSNdoI/AAAAAAAAABY/VB8hrsxdHjg/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.
<a class="thumbnail" href="#thumb">Icon OB<span><img src="http://lh6.ggpht.com/_w3vbLlHM5kg/SgV_YnXWIfI/AAAAAAAAAXI/_sUC_cUabLQ/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...

12 komentar untuk “Menampilkan Image dalam Efek Zoom Image”

  1. :D

    ini dia yg saya cari2 bang....
    klo kemarin blog saya gambarnya harus di klik baru muncul zoom,,,,,

    thank's

    BalasHapus
  2. Terima kasih ya...nice job

    BalasHapus
  3. Lumayan dah trimakasih ..dah nambah ilmu...:D

    BalasHapus
  4. topik yang keren.. terimakasih sangat bermanfaat untuk newbee sekelas saya..GBU

    BalasHapus
  5. MANTAP bang... :X :-* ;;)

    BalasHapus
  6. GUE mce newbee brow,,
    jd mohon bimbinganya,,
    gmn caranya? klo kita buat link trus jika di klik mka isi link akn muncul artikel yg telah kita tulis.gt
    biar blog kita g terlalu penuh..
    cntoh==>> ada nama link a,b,c trus kita klu klik yg B mka akan muncul isinya.. umpama isinya bla bla bla....gt
    mkcih...

    BalasHapus
  7. @arix nyentrix : Mungkin maksud kk, ketika kita klik label tertentu maka yang muncul hanya judul posting saja. Kalau maksudnya seperti itu, tinggal kk search aja di blog ini tentang judul posting saja (klik label yang tampil judul posting saja). Tapi terlebih dulu kk pastikan widget label sudah ada di blog kk dan setiap postingan sudah memiliki label tertentu.
    Mohon dikoreksi jika maksudnya bukan demikian.

    BalasHapus
  8. mantab
    berguna bgt bluat blog sy yg penuh gambar

    BalasHapus