mas template

Membuat Efek Image Zoom dengan Jquery

jquery zoom image
Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger anda
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit HTML
  4. Lalu anda cari kode berikut ]]></b:skin>
  5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.
  7. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
    <script type="text/javascript">
    jQuery(document.body).imageZoom();
    </script>
  8. Yang terakhir Save Template anda. Selesai dah....
Catatan :
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca di sini.

Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

69 comments:

  1. ora mudeng mas... kenapa jadi disini mas???

    ReplyDelete
    Replies
  2. @Mas Fakhrial:
    Itu untuk template berbeda-beda lho mas, hati2 jika menempatkan kode HTML bisa rusak semua templatenya. Kalo tetep nggak bisa jangan dipaksa nanti malah bikin berat loading blog

    ReplyDelete
  3. Its Not Work!! T.T, gan tolongin ane sapaya bisa jalan :D. saya beneran pengen bikin gambar dipostingan ku bisa di zoom. tyvm

    ReplyDelete
  4. @MyAnimeGirls:
    PErhatikan kode script yg harus diletakkan diatas /head itu sudah saya rubah.
    Kalo tetep nggak bisa coba perhatikan catatan yang ada di bawahnya.
    Makasih udah mampir

    ReplyDelete
  5. weewww...udah jalan gan!! ^^ makasih bgt. oya...klo lagi ada waktu buat tutor bikin slide kayak di web ini ya (http://www.bloggertemp.com/)..tpi versi vertikalny :D, tyvm gan!

    ReplyDelete
  6. Mas, cuma ngefek sama gambar yg diupload lewat blogspot langsung, yg saya upload lewat luar seperti photobucket gak ngefek? Mohon pencerahannya.. Terima Kasih..

    ReplyDelete
  7. mas gimana caraxa..bikin tulisan yg muncul ketika mengklik gambar...seperti gambar jQuery di pojok kiri itu mas?

    ReplyDelete
  8. @Yuda Seller:
    Efek zoom dengan menggunakan jQuery ini hanya berlaku pada gambar yang disimpan di blogger dan google site

    @Anonymous :
    Itu script iklan dari ISM (Image Space Media)
    anda harus daftar dulu disana untuk memunculkan iklan yang diletakkan di setiap gambar yang ada di postingan

    ReplyDelete
  9. mas..agar zoomnya lebih di perbesar seperti ukuran aslinya bagaimana..trims

    ReplyDelete
  10. Wahh.. thanks gan... tapi ga work eumm.. :( mungkin karena templatenya ga support.. tapi makasih wat infonya..

    ReplyDelete
  11. sob, saya baru pake templatenya, coba liat ya apa sudah benar cara memasangnya

    ReplyDelete
  12. @Rudy Hartono:
    Sudah bener mas, udah lihai ni keknya ya....

    Mestinya komentarnya diartikel template itu, biar org lain juga bisa liat ... heheheheh

    ReplyDelete
  13. tapi mas, nama judul blog saya (Blog Rudy Hartono) kok jadi menurun / terpenggal ya, gak mendatar, caranya supaya gak turun gimana mas? cari kodenya yang mana?

    ReplyDelete
  14. @:
    Itu karena banner yg saya pasang di header ukurannya panjang mas. Jika Anda ingin bannernya diperpendek cari kode berikut di Edit HTML :
    #header{float:left;width:220px;border:0 solid #dcd9d9;text-align:left;color:#333;margin:0}
    #header2{float:right;width:728px;margin-right:10px;text-align:left;color:#555}

    Rubah width:220px menjadi 440px kemudian rubah juga lebar header 2 dari 728px menjadi 468px

    ReplyDelete
  15. trims ilmunya .. indah nya berbagi salam ya sobat bloger

    ReplyDelete
  16. Mas, kalau dimasukkin ke html web gimana?
    Kn nggak ad kode ]]> di html coding saya
    Jd harus diletakkan dimana mas?

    ReplyDelete
  17. wah mantap mas bro tutorialnya, thanks

    ReplyDelete
  18. makasih gam, mas kholis makin manstab

    ReplyDelete
  19. sayang kode scripnya sudah tidak bisa di download ulang n sudah tidak ada mas..

    ReplyDelete
  20. Kren Boz, kunjungi juga t4 ane ya, dan bergabung dengan ane, sapapun itu yang mau bergabung atau mengunjui kami, dan kami pun akan melakukan timbal balik, dan jangan lupa like :)
    Salam kenal, baik untuk admin ataupun pelanggan setia blog ini "pengunjung"

    ReplyDelete
  21. gan trimakasih buat tutorialnya scriptnya berkerja debgan baik,
    thanks ya gan visit back

    ReplyDelete
  22. thanks for your tutorials above, it's working. thanks a lot, please visit abck

    ReplyDelete
  23. Wew script nya bisa di-download juga ternyata! Makasih ya mas.. :)

    ReplyDelete
  24. kalo dipasang di web gimana gan???
    kunjungi web saya ya...www.atributpaskibra.com
    tks

    ReplyDelete
  25. maksh gan infonya kujug balik ya

    http://new-movie22.web.id

    ReplyDelete
  26. What a god article ! i already learned in your article, Thanks very much.
    Please visit :

    Baju Bola
    BBM For Android

    ReplyDelete
  27. wahh mks ilmunya membuat efek image tsb.. bagus banget gan.. sukses selalu Si Tukang Tidur Sukses Bisnis Online

    ReplyDelete
  28. trima kasih byk tutornya mas..sukses selalu

    ReplyDelete
  29. mantab brooww...!!! jangn lupa juga pda mampir k blog ane....

    http://jasaquantitysurveyor.blogspot.com/

    ReplyDelete
  30. Thank you for sharing in this article
    I can learn a lot and could also be a reference
    I am happy to find your website and can join to comment
    I think is very valuable to be able to read your writing, and on this occasion will I use for my reference source
    Thank you so much for sharing, I hope you continue to write spirit next topic


    jual obat pembesar penis bergaransi :
    >> Obat pembesar penis <<

    ReplyDelete
  31. Greetings admin
    I like your topic, after reading your article very helpful at all and can be a source of reference
    I hope others can feel the same benefits as me
    I will wait for your next article updates
    Thank you, for sharing
    vimax |
    vimax asli |
    obat pembesar penis |
    vimax canada |

    ReplyDelete
  32. makasih atas infonya berguna untuk saya yang sedang mencari efek zoom dengan jquery

    salam kenal http://whussaya.blogspot.co.id/

    ReplyDelete
  33. Kami adalah pusat jual obat herbal dewasa, obat kuat pria dan berbagai macam produk pasutri lainnya Seperti, Obat Pembesar Alat Vital Pria, Alat Bantu Toys Pria Wanita Dewasa, Obat Penyubur Kandungan, Alat Pembesar Kelamin Pria, Kosmetik Kecantikan, Kesehatan, Obat Kuat Pria, Obat Pelangsing Badan, Obat P3rangsang Wanita. Produk Terjamin Asli Dan Original import dan terlengkap di Indonesia. Silahkan Berbelanja Dan Jangan Ragu Atau Sungkan Untuk Menghubungi Kami Jika Anda Butuh Bantuan. Terima Kasih
    INFO SELENGKAPNYA SILAHKAN KUNJUNGI WEBSITE KAMI.
    WEBSITE: WWW.TOKODEWASA.NET
    WWW.VIMAX-IZON.COM

    ReplyDelete
  34. Mas kok gak bekerja sudah saya coba, mohon bimbinganya, blog saya http://www.percetakan-em.com

    ReplyDelete
  35. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete
  36. - Chúng tôi chuyên cung cấp đèn pha led , đèn led , đèn led siêu sáng, đèn led chiếu sáng, đèn pha led, đèn led , đèn led siêu sáng, đèn led chiếu sáng giá rẻ, chất lượng cao, bảo hành 24 tháng trên toàn quốc. Khi khách hang có nhu cầu mua hang trên toàn quốc.
    - Đồng thời chúng tôi còn là nhà cung cấp các loại nguyên liệu mỹ phẩm thiên nhiên như: bơ cacao, bơ ca cao, nguyên liệu mỹ phẩm handmade nguyên chất, cao cấp chất lượng có nhiều công dụng trong việc dưỡng da dành cho khách hàng, được đông đảo chị em phụ nữ ưa chuộng và sử dụng để săn sóc sắc đẹp của mình.
    - Nếu khách hàng còn gặp nhiều khó khăn trong việc chăm sóc sắc đẹp thì sản phẩm bơ hạt mỡ, bo hat mo, shea butter, nguyên liệu mỹ phẩm handmade nguyên chất từ tự nhiên có nhiều công dụng trong việc làm mềm mịn làn da, xóa tan vết thâm nám, đẩy lùi mụn cảm và triệt để xóa nhăn. Hãy cùng chúng tôi chăm sóc sắc đẹp của bạn, chỉ có bạn mới có thể tự chăm sóc cho bạn than của mình.
    - Sản phẩm tiếp theo mà chúng tôi sẽ giới thiệu cho các bạn đó là: bơ đậu phộng, bo dau phong , bơ đậu phộng ăn với gì, bơ đậu phộng bán ở đâu thơm ngon, cao cấp chất lượng có nhiều công dụng trong việc dưỡng da dành cho khách hàng, được đông đảo chị em phụ nữ ưa chuộng và sử dụng để săn sóc sắc đẹp của mình.
    - Ngoài ra chúng tôi còn là nhà cung cấp dịch vụ ăn uống khắp toàn quốc, đặc biệt là đặc sản cơm niêu, cơm niêu sài gòn, cơm niêu vũng tàu được đông đảo khách du lịch ưa chuộng và là điểm đến khi có nhu cầu ăn uống những món ăn ngon.
    - Và cuối cùng là một trong những dòng sản phẩm nhập khẩu cao cấp nhạp trực tiếp từ Úc và Mỹ: bột yến mạch, bot yen mach , yến mạch, yến mạch giảm cân thơm ngon, cao cấp chất lượng có nhiều công dụng trong việc dưỡng da dành cho khách hàng, được đông đảo chị em phụ nữ ưa chuộng và sử dụng để săn sóc sắc đẹp của mình.

    ReplyDelete
  37. Terima kasih untuk berbagi di sini
    saya sangat senang untuk membaca ulasan Anda
    Saya harap Anda memberikan topik yang bermanfaat untuk semua orang.

    http://vimaxherbalalami.com/

    http://vimaxherbalalami.com/khasiat-vimax-herbal-dan-kegunaan-obat-vimax.html

    http://vimaxherbalalami.com/ciri-ciri-vimax-asli-canada-dan-vimax-palsu.html

    http://vimaxherbalalami.com/alat-pembesar-penis-vimax-extender

    http://vimaxherbalalami.com/cara-memperbesar-penis-menurut-ajaran-islam.html

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger