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.
Untuk langkah awal sudah OK, langkah selanjutnya adalah upload gambar-gambar yang berukuran besar ke server tempat biasa anda menyimpan file gambar, misal ke photobucket.com atau imageshack.com atau di mana saja. kemudian copy alamat gambar tersebut. Misalkan kang rohman sudah mengupload gambar ke google pages dan mempunyai alamat gambar sebagai berikut :
http://kangrohman.googlepages.com/Waterlilies.jpg
Pola pemanggilan gambar yang akan di zoom adalah sebagai berikut :
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
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.
Tidak ada komentar:
Posting Komentar