29 June 2010

Cara Membuat Efek Zooming Gambar Pada Blog Dengan "Expando"


Tips & Trik - Kali ini kita akan mencoba memasang efek pembesaran (zooming) pada gambar di blog kita dengan menggunakan script expando. Expando dikembangkan oleh Dynamic Drive dengan memanfaatkan engine jquery. Sebenarnya script ini bukan hanya digunakan untuk melakukan pembesaran pada gambar saja, tetapi juga bisa digunakan untuk hal yang sebaliknya, yakni mengecilkan gambar.

Cara kerja expando adalah mengembalikan gambar pada ukuran aslinya. Pejelasaannya demikian, jika kita memiliki sebuah gambar dengan ukuran 176px X 220px, agar expando memberi efek pembesaran maka aturlah pamasangan gambar dengan ukuran yang lebih kecil dari gambar aslinya, misalnya mejadi 112px X 139px, dan sebaliknya, jika anda menghendaki untuk efek pengecilan, maka aturlah pemasangan gambar agar memiliki ukuran yang lebih besar dari aslinya. Silahkan lihat contoh gambar berikut ini;


Gambar ini memiliki ukuran asli 176px X 220px, lalu kami pasang dengan ukuran 112px X 139px dan telah kami beri efek expando. Silahkan anda arahkan kursor pada gambar tersebut, lihatlah... gambar kembali ukuran semula 176px X 220px (efek pembesaran). Ini berlaku sebaliknya pada gambar di bawah ini, yang telah kami pasang dengan ukuran 267px X 333px, jika anda arahkan kursor kepadanya, maka gambar akan kembali ke ukuran aslinya (efek pengecilan).


Sudah mendapatkan gambaran yang jelas mengenai penggunaan script expando?. Baiklah, sekarang saatnya kita mencoba memasang script expando ini pada blog kita masing-masing.

Pertama, download file script expando.zip ini lalu extract file tersebut sehingga Anda mendapatkan file expando.js dan upload file expando.js itu ke web hosting Anda. Jika anda belum memiliki tempat penyimpanan online (hosting), anda bisa memanfaatkan hosting web gratis yang disediakan oleh Google melalui sites.google.com atau menyimpannya di google code, silahkan lakukan pendaftaran dengan mengikuti langkah-langkah yang diberikan.

Langkah kedua, pasang script seperti contoh berikut ini pada template html anda, letakkan script diantar kode <head> sebelum kode </head>.


Sesuaikan src='http://hosting.anda.com/expando.js' dengan lokasi tempat Anda menghosting file expando.js. Simpan perubahan yang telah anda lakukan.

Berikut ini adalah cara menambahkan script expando pada gambar. Tambahkanlah kode class="expando" pada setiap gambar yang ingin anda beri efek, ini contohnya;



Selamat mencoba....
at

Your comments:

Gunakan kode " :) :( ;) :p :d :xd :o :s :'( :x( :* :8) :a 3: " untuk menambahkan Emoticon pada komentar.

8 comments :

  1. hana30 June, 2010 09:39

    mahu buat juga :p .. nanti tolong ye :p

    ReplyDelete
  2. Anonymous30 June, 2010 23:23

    Mantap brader ^_^

    ReplyDelete
  3. Unknown01 July, 2010 08:02

    waw mantap picnya saya coba yah

    ReplyDelete
  4. Zul17 January, 2011 13:34

    kq blom jg ya bos...

    ReplyDelete
  5. Boja Linuxer17 January, 2011 17:34

    @Zul: selamat datang... hmmm.. tidak begitu jelas dengan apa yang Anda maksud.. :D

    ReplyDelete
  6. Dimas Yuwono04 February, 2011 20:12

    bos, qo di blog saya bisa nih tapi waktu pertengaahan loading page, gambar nya bisa zooming tapi pas loading page uda beres malah engga bisa lagi, kira-kira kenapa yah ? uda bener-bener ngikutin langkah-langkahnya ..,
    tks sebelumnya

    ReplyDelete
  7. Boja Linuxer04 February, 2011 21:11

    @DY: Coba Anda refresh halaman bergambar yang Anda beri efek expando.. coba jangan sentuh gambar hingga halaman selesai diload.. :)

    ReplyDelete
  8. Nur Blogg17 September, 2012 19:57

    mantap sangat :D
    ikut coba Gan...

    ReplyDelete

Terima kasih untuk tidak meletakkan direct link pada isi komentar karena Blogger anti spam akan secara otomatis menandai sebagai spam dan menyembunyikannya.

Bantu kami meningkatkan kualitas blog ini dengan meninggalkan komentar pada artikel yang Anda baca. Terima kasih...