Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

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. Contoh seperti gambar di bawah ini, silahkan klik pada gambarnya :

 

 

Dan coba klik juga gambar di bawah ini :

 

 

 

 

 

 

Hihihiโ€ฆ gambar yang kedua aneh ya? itu sih cuma becanda biar tidak terlalu serius, ngeblog ko serius, santai aja bro.

Untuk membuat efek zooming seperti di atas, 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 :

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.

27 Agustus 2008 - Posted by | blog tutorial, blogspot tutorial

25 Komentar »

  1. o…itu ya caranya, makacih banget kang…. manbabzz… ! Sukses selalu… !

    Komentar oleh ugiQ | 27 Agustus 2008 | Balas

  2. e… sory kang… mksd nya mantabzz.. he..he… ๐Ÿ™‚ =))

    Komentar oleh ugiQ | 27 Agustus 2008 | Balas

  3. Intinya maksnyus abis kang hehehe

    Komentar oleh OOM | 27 Agustus 2008 | Balas

  4. ternyata begitu tho…., baru ngerti aku

    Komentar oleh alief | 27 Agustus 2008 | Balas

  5. wah akang, lucu pisan efeknya…
    pengen cepet2 masang di blogkyu dech…
    nuhun…

    Komentar oleh GigiSehatBadanSehat | 27 Agustus 2008 | Balas

  6. kang, ada pertanyaan:
    gambar2nya masi bisa kedetek ama google gak?

    Komentar oleh GigiSehatBadanSehat | 27 Agustus 2008 | Balas

  7. lumayaaaannn…nambah”in blog biar banyak postingan…

    Komentar oleh Anonymous | 27 Agustus 2008 | Balas

  8. Kok gambar kedua ada kembaran Kang rohman sih

    Komentar oleh edisamsuri | 27 Agustus 2008 | Balas

  9. 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?

    Komentar oleh GigiSehatBadanSehat | 27 Agustus 2008 | Balas

  10. ok deh kang ntar dicoba klo dah perlu, kotak komentarku dah sukses loh, walaupun peras keringat juga soalnya template-nya bukan minima thanks ya…

    Komentar oleh Project | 27 Agustus 2008 | Balas

  11. @for all : thanks untuk semua yg sudah berkunjung dan memberi komentar.

    Komentar oleh Rohman | 27 Agustus 2008 | Balas

  12. Waduh…blom kepikiran naro gambar di blog euy, entar deh kapan2 mungkin ilmunya bisa berguna.

    Komentar oleh Kasturi Kijang | 27 Agustus 2008 | Balas

  13. haadduuhh kang,, ampe kaget liat fotonya si akiii…

    Komentar oleh Bani Risset | 28 Agustus 2008 | Balas

  14. asli keren

    Komentar oleh admin | 28 Agustus 2008 | Balas

  15. kerenn banget…..

    Komentar oleh frendli | 28 Agustus 2008 | Balas

  16. Mantaff nih om tutorialnya

    Komentar oleh Dandy_Blog | 28 Agustus 2008 | Balas

  17. trims berguna banget ulasannya.. ditunggu update berikutnya ๐Ÿ™‚

    Komentar oleh Ksatrio Wojo Ireng | 29 Agustus 2008 | Balas

  18. 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 ๐Ÿ˜ฆ

    Komentar oleh Syahuri | 29 Agustus 2008 | Balas

  19. mantap kang hehe,,,

    Komentar oleh Shedtya | 30 Agustus 2008 | Balas

  20. Coool, yeess berhasil, THX bgt Kang

    Komentar oleh viviana | 31 Agustus 2008 | Balas

  21. hahaha….gambar yg ke-2-nya mas….!!!
    Mkaci dah buat kang rohman…kang rohman the best dah… ๐Ÿ™‚ ๐Ÿ™‚

    Komentar oleh jfaizal | 31 Agustus 2008 | Balas

  22. kereeeeennnnnn

    Komentar oleh stuQ | 31 Agustus 2008 | Balas

  23. 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

    Komentar oleh kamusarea | 1 September 2008 | Balas

  24. hehehe….kayaknya asik Kang dicoba

    Komentar oleh gus | 4 September 2008 | Balas

  25. waw, kereeeeeeeeeen….!!!!!!!!!!!!!!!!!!!!

    Komentar oleh SaSuKe UcHiHa | 5 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: