Zoom Efek Dengan Script Fancy Zoom

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]
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 :

 

ektrak

 

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 :




  1. Silahkan login ke blogger dengan Id anda.


  2. Klik Tata Letak.


  3. Klik tab Edit HTML.


  4. Klik tulisan Download template Lengkap. Silahkan di backup dulu templatenya (penting).


  5. Cari kode </head>


  6. Simpanlah kode yang tadi di buat di atas kode </head>. Contoh :

     kode 




  7. Lihat sedikit ke bawah, dan temukan kode ini <body>


  8. Hapus kode <body> lalu ganti dengan kode :

     


    <body onload="setupZoom()">

     




  9. 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.
Share on Google Plus

About Admin

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Labels

blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )