CARA MEMBUAT EFEK ZOOM PADA GAMBAR: Expando Effect

Kali ini posting bagaimana cara memberi efek zoom pada gambar dengan style expando. Mungkin cara memberi efek zoom pada gambar banyak dilakukan kawan-kawan blogger, namun tampilan efek zoom kali ini sedikit berbeda, karena efek zoom menggunakan Expando yang dikembangkan oleh Dynamic Drive dengan memanfaatkan engine jquery. Ikuti langkah berikut ini.

• Log in ke blog anda
• Klik Rancangan
• Klik Edit HTML
• Masukkan Kode berikut sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>  <style type='text/css'> img.expando{ border: none; vertical-align: top; } </style>  <script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-expando.js' type='text/javascript'/>

• Simpan Template
• Langkah selanjutnya kalau anda ingin memberi efek zoom pada gambar, berikan kode sebagai berikut.

<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 147px; height: 184px;" src="masukkan alamat gambar anda di sini" class="expando" border="0" />

• Gunakan kode di atas pada saat posting, masuk ke Edit HTML sebelah kanan atas di samping Compose
• anda bisa mengganti tulisan warna merah dengan alamat gambar anda, dan atur kode width: 147px; height: 184px dengan ukuran yang anda inginkan

Catatan 
Sebaiknya anda simpan kode HTML expando pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada kawan yang nyoba ternyata gak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online ( google code) silahkan baca di sini.

Ok gan...selamat mencoba dan sukses selalu...jangan lupa komentar ya buat koreksi perkembangan blog ini. makasih.

''keep spirits and do the best''