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.
Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan. Atau jika ingin membaca melalui feed reader anda, silahkan klik di sini!
o...itu ya caranya, makacih banget kang.... manbabzz... ! Sukses selalu... !
e... sory kang... mksd nya mantabzz.. he..he... :) =))
Intinya maksnyus abis kang hehehe
ternyata begitu tho...., baru ngerti aku
wah akang, lucu pisan efeknya...
pengen cepet2 masang di blogkyu dech...
nuhun...
kang, ada pertanyaan:
gambar2nya masi bisa kedetek ama google gak?
lumayaaaannn...nambah"in blog biar banyak postingan...
Kok gambar kedua ada kembaran Kang rohman sih
uda aku pasang....
bisa sich...tapi kok jalannya lambat banget ya...kadang2 macet, di klik gak respon...
apa karena blog ku kebanyakan flash nya yach?
ok deh kang ntar dicoba klo dah perlu, kotak komentarku dah sukses loh, walaupun peras keringat juga soalnya template-nya bukan minima thanks ya...
@for all : thanks untuk semua yg sudah berkunjung dan memberi komentar.
Waduh...blom kepikiran naro gambar di blog euy, entar deh kapan2 mungkin ilmunya bisa berguna.
haadduuhh kang,, ampe kaget liat fotonya si akiii...
asli keren
kerenn banget.....
Mantaff nih om tutorialnya
trims berguna banget ulasannya.. ditunggu update berikutnya :)
ilmu dan file yg bermanfaat nih kang :). Thanks.
Tapi biasanya saya gak peduli dgn ukuran gambar pada postingan, soalnya udah saya tambahin kode max-width di cssnya kang :)
tapi saya tag ini ndak mempan di IE :(
mantap kang hehe,,,
Coool, yeess berhasil, THX bgt Kang
hahaha....gambar yg ke-2-nya mas....!!!
Mkaci dah buat kang rohman...kang rohman the best dah... :) :)
kereeeeennnnnn
wah keren juga nih tutorialnya patut dicoba
becandanya glek
fun juga
tapi kalo kita udah upload gambar ke blogspot emang dikecilin tapi kalao user klik gambarnya nanti dia akan mendapatkan kualitas gambar yang kita upload kok
trims
hehehe....kayaknya asik Kang dicoba
waw, kereeeeeeeeeen....!!!!!!!!!!!!!!!!!!!!
kok keluar pop up window ya klo di klik gambarnya????
keren
thanx mas infonya he....
kang, makasih banyak ya.. sangat berguna.. kapan-kapan kunjungi blog saya ya... trims
Mr. Rohman, I am so amazed with your blog tutorials. You've done a very great deed. I've been searching for an easily understandable blogs tutorials for a long time, and I departed here. This is the site I'm searching for ages. Now, I'm trying to implement most of your tips and methods in my blogs. Some of them worked successfully, and some of them I'm doing now. Thanks a bunch for your smart and practical tips. Go on creating charming and creative tips and tricks...Mr. Rohman..
Hi broer,
Thank you for stopping to my blog. If you feel difficulty with Indonesian language, you can read my blog in English. Please visit http://www.bogspottutorial.com
Dah cuba.. tapi kenapa tak menjadi??
thanks tipsnya kang.. trus kr2 utk konsep photoblog (utk pengguna blogspot) dgn menggunakan JQuery utk "zoom" dan GallerifficPlus utk "konsep album" nya, gmn kang? bs mnt tolong tips/trik2nya..?
(contoh site WP yg pk..: photography.web.id)
kynya bgus bnget kang, jd pengen buat photoblog yg ky gitu, tp bingung gmn cara aplikasinya dalam blogspot, terutama dalam postingnya..:) tlg dibantu ya kang.. sy udah cr kmana2, kynya gak ada yg posting tutorial utk blogspot-nya.. thx vr mch :)
Ini yang dari dulu saya cari kang
Kalau di postingan ngga ada gambar apa bisa berguna cara ini
Waah... Infonya menarik banget..
terima kasih..
Btw, saya mau tanya nih..
Kira2 bisa ga ya kita membuat suatu website berada dalam "a scroll function" di blog kita, kira-kira bisa ga ya?
Kalau bisa, tolong buatkan tutorialnya dong...
Saya sudah cukup lama mencarinya...
Terima kasih sebelumnya...