Bagi anda yang ingin menyimpan gambar dalam ukuran besar pada halaman blog, tentunya akan mengalami kesulitan karena keterbatasan kolom posting ataupun sidebar. Untuk mengatasi hal ini, banyak cara yang bisa kita lakukan, diantaranya adalah dengan memakai scrip fancy zoom. Dengan menggunakan script fancy zoom, anda cukup menempatkan gambar berukuran kecil pada halaman blog anda, baik itu di tempatkan pada halaman posting ataupun sidebar atau juga di bagian footer. Prosesnya adalah ketika gambar tersebut di klik oleh pengunjung blog, maka gambar yang tadinya berukuran kecil akan di zoom sehingga tampak gambar yang berukuran besar. Untuk melihat contoh efek menarik dari fancy zoom, silahkan klik di sini!
Untuk membuat efek zooming seperti yang di contohkan, anda memerlukan script yang di namakan fancyzoom. Sebenarnya script ini di pakai biasanya di pakai pada blog wordpress, namun setelah kang rohman coba, ternyata bisa berjalan di mesin blogger dengan baik. Tertarik membuat efek zoom seperti ini, silahkan lanjut samapai akhir. Berikut langkah-langkahnya :
Silahkan download terlebih dahulu script fancy zoom, klik pada banner di bawah ini :
| Mirror 1 (ziddu) | Mirror 2 (bizhat) |
![download_thumb[1]](http://lh4.ggpht.com/24rohman/SLSe1syl8MI/AAAAAAAAAH4/rP0vwSH0hsY/download_thumb1_thumb1.jpg?imgmax=800 "download_thumb[1]") | |
Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :
Nanti akan ada dua file java yang file name nya yaitu : FancyZoom.js dan FancyZoomHTML.js. Tugas anda selanjutnya adalah mengupload file java tersebut ke server tempat anda biasa menyimpan file java, misalkan ke yahoo geocities atau yang lainnya. Setelah di upload, kemudian copy kedua alamat file tersebut, misalkan kang rohman sudah mempunyai alamat sebagai berikut (hanya contoh saja, jangan di pakai) :
http://www.geocities.com/amn_tea/FancyZoom.js
http://www.geocities.com/amn_tea/FancyZoomHTML.js
Dari alamat tersebut, buatlah kode seperti ini (contoh juga) :
<script src='http://www.geocities.com/amn_tea/FancyZoom.js' type='text/javascript'></script> <script src='http://www.geocities.com/amn_tea/FancyZoomHTML.js' type='text/javascript'></script>
Kemudian masukan kode tersebut di atas kode </head> di dalam template blog anda. Bingung? ya sudah, lengkapnya begini nih caranya :
- Silahkan login ke blogger dengan Id anda.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Klik tulisan Download template Lengkap. Silahkan di backup dulu templatenya (penting).
- Cari kode </head>
- Simpanlah kode yang tadi di buat di atas kode </head>. Contoh :
- Lihat sedikit ke bawah, dan temukan kode ini <body>
- Hapus kode <body> lalu ganti dengan kode :
<body onload="setupZoom()"> - Klik tombol SIMPAN TEMPLATE.
Jadi untuk contoh alamat di atas, kode yang di buat bisa seperti ini :
<a href="http://kangrohman.googlepages.com/Waterlilies.jpg"><img height="200" src="http://kangrohman.googlepages.com/Waterlilies.jpg" width="300" border="0" /></a>
Kode width="300" dan height="200" adalah ukuran agar gambar yang tampil bisa menjadi berukuran lebih kecil daripada ukuran aslinya, dan tentu saja nilai ini bisa anda ganti dengan nilai yang anda inginkan.
Semoga bermanfaat.
Di tulis oleh : Kang Rohman pada 27 Agustus 2008
Description: Zoom Efek Dengan Script Fancy Zoom, Rating: 5
Reviewer: Unknown, ItemReviewed: Zoom Efek Dengan Script Fancy Zoom
Ingin artikel seperti Zoom Efek Dengan Script Fancy Zoom langsung di kirim ke email? Silahkan masukan alamat email anda untuk berlangganan.
Privasi dijamin. Kami tidak akan membagikan informasi anda.
0 komentar pada Zoom Efek Dengan Script Fancy Zoom :
Posting Komentar
Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.