Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Zoom Effect pada Gambar di Blog

Masih ingat dengan tutorila cara membuat zoom effect yang juga ditulis di blog ini? Kali ini kita akan belajar membuat zoom effect yang lebih mudah. Zoom effect adalah membuat efek perbesar pada gambar yang tersentuh oleh cursor.

Jika dulu harus mengedit template untuk membuat zoom effect, yang ini tidak usah mengubah template. Karena kode CSS-nya digabung langsung dengan HTML kode gambar. Tentu ini selain mempermudah juga bisa membuat blog tidak banyak kode CSS atau membuat blog tidak berat, sehingga loading blog tidak lemot.

Zoom effect yang membuat gambar jadi lebih besar ini bisa dipasang di post atau sidebar blog. Saat punya banner gambar di sidebar bisa memberikan efek zoom ini. Bisa jadi pilihan membuat tampilan gambar banner atau foto jadi lebih menarik, selain memakai mouseover. Berikut adalah kode untuk membuat effect zoom;

<style type="text/css">
.ow img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="http://2.bp.blogspot.com/-w0baJeovlEs/UHo3BGoZ2aI/AAAAAAAAEoU/jdCO_uGvFSc/s320/follow.jpg" /></a>

Ganti kode yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu bisa menambahkan kode diatas di post dengan memilih HTML saat menulisnya. Atau juga bisa ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan seperti ini:




Bagaimana? Mudahkan? gambar, banner atau foto akan terlihat jadi lebih menarik. Akan membuat pengunjung tertarik untuk melihat dan mengklik.

54 komentar untuk "Membuat Zoom Effect pada Gambar di Blog"

  1. mantap gan...yang pertama komentar nih.
    kunjungi balik blog aku mas kurnia..

    BalasHapus
  2. Mantap Gan... Tambah ilmu lg ni saya, bermanfaat banget buat saya yang msh newbie ini... Makasih banyak Gan.. Ditunggu kunbalnya....

    BalasHapus
  3. scriptnya kalau saya pasang ke dalam blog berplatform wordpress kira2 apa bisa juga ya ?
    terima kasih

    BalasHapus
  4. okok deh .... makasih yah gan atas infonya ,,

    BalasHapus
  5. widih ... mantep nih tutornya... makasih yo ..

    BalasHapus
  6. makasih bnyak ilmunya..sangat membantu sekali..

    BalasHapus
  7. nambah ilmu baru lagi nih .. tks gan ..

    BalasHapus
  8. terima kasih sudah berbagi infonya,,

    BalasHapus
  9. terima kasih sudah berbagi ilmunya

    BalasHapus
  10. artikel yang bermanfaat sekali,,terima kasih infonya

    BalasHapus
  11. nice post,,,terima kasih sudah berbagi informasinya

    BalasHapus
  12. makasih bnyak untuk tutorialnya..sangat membantu sekali..

    BalasHapus
  13. terimakasih bnyak atas informasinya..saya langsung dicoba gan..

    BalasHapus
  14. untuk menjawab rasa penasaran saya langsung coba gan..

    BalasHapus
  15. sangat membatnu sekali gan..makash bnyak infonya..

    BalasHapus
  16. Kalo gambar diklik jadi fullscreen tapi tetep dihalaman blog gimana ya caranya?

    BalasHapus
  17. patut dicoba nih om
    oiya kalau mau menghilangkan backgroud bisa ga om

    BalasHapus
  18. ijin Praktekin Gan :D
    manteebb nih

    BalasHapus
  19. wah . .mantap nie. .ntar lngsung praktek ah. .

    BalasHapus
  20. Malem sobat..
    Waw nice post..
    Yang post sebelum nya juga bagus tapi ini lebih baik dari yang lalu..:)
    terus berkarya ya..
    Haha..:D
    oh ya mampir juga ya ke my blog..:)

    BalasHapus
  21. ikutan juga ah gan

    main-main ya gan ke blog aku

    http://www.googlefacebookyoutubeyahoobaiduwikipedialivetwitteramazontaobao.com/

    BalasHapus
  22. makasih Sob yaaa infonya......................

    BalasHapus
  23. sipppp,, maknyoosss. ijin nyoba yaaa..!!

    BalasHapus
  24. mudah sekaliii yaa ternyata....... makasih tipsnya...

    BalasHapus
  25. »»»

    Buat Yang Mau Download Gratis Film Dewasa Sepuasnya & MP3 Brainwave Synchronization Audio Therapy Technology Yang Dapat Merangsang Pembentukan Gelombang Alfa Pada Bagian Otak, Sehingga Otak Akan Menghasilkan Hormon Yang Mampu Meningkatkan Kinerja Mental, Kekuatan Otak, Kreativitas, Daya Ingat, Konsentrasi, Kecerdasan, Kualitas Tidur, Kesehatan Otak, Kualitas Kesehatan, Kesejahteraan, Keberhasilan, Kemakmuran, Kebugaran, Tenaga Dalam, Hubungan Spiritualitas, Energi Supranatural, Penyembuhan Gangguan Perkembangan Dalam Peningkatan Aktifitas Motorik Anak-Anak (ADHD), Gangguan Stres Pasca Trauma (PTSD), Autisme, Kecanduan, Depresi, Insomnia, Mengurangi Tingkat Stres, Penurunan Berat Badan Dan Pembentukan Diri Pribadi Positif

    Silahkan Kunjungi Alamat Website Berikut Ini :
    * brainsynctech blogspot com
    * brainsync co nr

    Terima Kasih

    »»»

    BalasHapus
  26. nice
    ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.

    BalasHapus
  27. nice
    ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.

    BalasHapus
  28. nice
    ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.

    BalasHapus
  29. nice
    ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.

    BalasHapus
  30. kunjungan silaturahmi, salam kenal, :D

    BalasHapus
  31. Suwun, terima kasih untuk tipsnya

    BalasHapus
  32. Mantap gaaan! Izin praktekiin~

    BalasHapus
  33. Ijin copy ya mas, bermanfaat :)

    BalasHapus
  34. terima kasih... sudah coba dipraktekkan walaupun pake pusing2 dulu :)) maklum baru aja belajar.

    BalasHapus
  35. Wah menarik sekali mas infonya, kebetulan saya juga lagi mau menulis artikel dengan tema serupa, izin copy code css nya ya gan.. ;)

    BalasHapus
  36. Makasih infonya, gan. bagus sekali

    BalasHapus
  37. Gebear harga promo murah dan aman di sani-shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS: 0816-597476 ATAU KLIK WEBSET RESMI KAMI http://sani-shop.blogspot.com/.

    Ready Stock!
    Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock!
    Apple iPhone 5 Rp.2,700.000
    Ready Stock!
    BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock!
    BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock!
    BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock!
    Blackberry Curve 9320.Rp.700.000,-
    Ready Stock!
    Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock!
    Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock!
    Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock!
    Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock!
    Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock!
    Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock!
    Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
    Ready Stock!
    Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
    Ready Stock!
    Nokia Lumia-710-whiteRp. 900.000,-
    Ready Stock!
    Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
    Ready Stock!
    Nokia Lumia 710 - Black.Rp. 900.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
    Ready Stock!
    Apple iPod Touch 4 Gen 8GB.Rp.700.000.
    Ready Stock!
    APPLE iPod Nano 8GB - Pink.Rp.500.000,-
    Ready Stock!
    Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
    Ready Stock!
    Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
    Ready Stock!
    Acer TravelMate TM8481-2462G32.Rp. 1.400.000
    Ready Stock!
    Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
    Ready Stock!
    Nikon D7000 kit 18-105mm.Rp.1.700.000.
    Ready Stock!
    Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
    Ready Stock!
    Nikon Coolpix L 120 Red.Rp. 900.000
    Ready Stock!
    Nikon Coolpix P 500 Black.Rp 1.000.000

    BalasHapus
  38. Keren gan terimakasih ya
    main ke juga ke blog ku
    terimakasih

    BalasHapus
  39. keren gan postinganya tapi klo masalah jam tangan keren silahkan kunjungi www.edydava.net ya :))

    BalasHapus
  40. mantap tipsnya gan. salam sukses selalu.

    BalasHapus
  41. wow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.

    BalasHapus
  42. Rata-rata konsumen yang telah sembuh dari penyakit gatal kulit terutama di daerah selangkangan dengan menggunakan obat pelangsing badan penghilang flek hitam bekas luka pada kulit yaitu Meilibahenling. Pemakaiannya pun sangat mudah, cukup jual obat bius wanita dioleskan ke bagian kulit bekas luka dan hasilnya akan terasa setelah dua minggu kulit tersebut akan kembali seperti semula. obat perangsang alami Obat penghilang bekas luka ini mengandung snake oil, glycerine, aloe picked oil, snake guts dan reseen mishap was leave. Penghilang flex hitam pada kulit ini tidak mengandung merkuri ataupun vimax asli merkuri ataupun hydroquinon yang biasanya menjadi bahan dasar untuk produk pemutih dan bisa menyebabkan perih ketika dioleskan sehingga obat penghilang bekas luka ini aman digunakan sekalipun untuk anak-anak. cara alami memperbesar alat vital pria menghilangkan bekas luka secara alami dan dengan obat - Noda atau flex hitam bekas luka yang disebabkan oleh bekas garukan, jatuh cara alami membesarkan payudara Kurap tubuh adalah infeksi jamur yang berkembang di lapisan atas kulit Anda.

    BalasHapus
  43. wah menarik sekali gan tutorialnya, thanks ya.

    BalasHapus

Berlangganan via Email