Kali ini posting bagaimana 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. Ok sebelum kita melanjutkan arahkan dulu kursor anda ke gambar di bawah ini.
Bagaimana gan...lumayan elegan bukan?...anda tertarik...???...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://cheahab.googlecode.com/files/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
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...
0 Comment:
Posting Komentar