Cara Membuat Efek Membesar atau Zoom Pada Gambar

Cara Membuat Efek Membesar atau Zoom Pada Gambar - Ficri Pebriyana
Cara Membuat Efek Membesar atau Zoom Pada Gambar - Membuat efek gambar membesar ketika disentuh oleh cursor atau kursor sangat membuat gambar lebih menarik dan bisa juga menarik perhatian mata pengunjung blog, selain gambar yang bisa membesar ketika disentuh cursor atau kursor ada juga cara agar link membesar ketika disentuh cursor silahkan baca artikelnya disini Cara Membuat Link Membesar Saat disentuh Cursor. Ketika keduanya Anda gunakan pada blog Anda setidaknya akan membuat tampilan blog menjadi lebih cantik dan menarik, serta bisa menarik perhatian pengunjung blog.

Membuat efek membesar pada gambar blog sangat mudah sekali seperti pada tutorial membuat link membesar saat disentuh cursor, cara membuat efek zoom pada gambar blog ini hanya menambahkan sebuah kode CSS yang berfungsi sebagai efek zoom atau membesar ketika cursor diletakan diatas gambar tersebut. Gambar yang membesar adalah gambar yang berada pada homepage dan halaman posting, karena kode ini khusus untuk gambar artikel atau postingan saja.

Nah pada kesempatan kali ini blog Ficri Pebriyana akan menjelaskan sebuah tips atau trik agar gambar pada postingan atau artikel blog bisa membesar otomatis dengan menggunakan efek zoom. Sobat Blogger semua bisa mencoba dan menerapkan tutorial membuat gambar membesar saat disentuh cursor pada blog masing-masing. Oke langsung saja lihat tutorial cara membuat efek membesar atau zoom pada gambar saat disentuh cursor dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
.post 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 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
5. Klik Simpan Template

Catatan :
- Kode CSS diatas sudah valid CSS3.
- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.

Cara Membuat Efek Gambar Berputar Zoom di Blog

Sekian artikel mengenai Cara Membuat Efek Membesar atau Zoom Pada Gambar. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

55 Komentar untuk "Cara Membuat Efek Membesar atau Zoom Pada Gambar"

  1. ternyata mudah ya mas, tanpa javascript pun bisa.... (y)

    BalasHapus
    Balasan
    1. iya, pakai css lebih ringan dibandingkan dengan menggunakan javascript... :)

      Hapus
  2. kok ga ada demonya bos, pengin liat dulu nih...

    BalasHapus
  3. Selamat Pagi Mas Ficri, trik cara yang keren nih Mas bisa membuat gambar
    Postingan jadi membesar, jadi gak usah di klik untuk lebih melihat gambarnya
    Saya coba dulu. terima kasih atas tutorial zoom pada gambar nya Mas Ficri :)

    BalasHapus
    Balasan
    1. pagi juga Mas Saud,
      iya betul, tanpa di klik gambar akan terlihat jelas... :)

      Hapus
  4. aiiiiih keren eeuuuy.... lihat demonya jadi pengen.... thanks tuk infonya, Kang Ficri :)

    BalasHapus
  5. Natural juga lebih oke ko mas :)

    BalasHapus
    Balasan
    1. kembali lagi ke diri masing-masing, mau pasang atau tidak :D

      Hapus
  6. kalau cara membesarkan gambarnya tapi pake objek lain bisa gak mas ?... ya seperti menggunakan jquery gitu lah

    BalasHapus
    Balasan
    1. oh maksudnya selain menggunakan css,
      ada sob bisa dengan memggunakan jQuery...

      Hapus
  7. saya ikutan nyoba ya Mas :)

    BalasHapus
  8. Yang rabun biar kelihatan hehe

    BalasHapus
  9. Saya juga memasangnya tapi yang javascript mas.

    Makasih mas bisa jadi alternatif kalau begitu buat saya.

    BalasHapus
    Balasan
    1. lebih baik pakai css mas, karena loading akan lebih ringan...

      Hapus
  10. mantep kang... bisa dipraktekan diblog nih jadi blog kita terlihat lebih menarik ,,, hmmm thkans kang,, sangat bermanfaat sekali... patut dicoba heheh :) salam kenal yah mas .... izin foollow yah, kalau berkenan bisa folow back heheh :)

    BalasHapus
  11. ini sangat simple sekali sob.. dan tidak ribet mudah juga di fahami bagi yang ingin mencobanya.... :)

    BalasHapus
  12. Trimakasih info'y, bs bikin blog sy tmbh menarik .

    BalasHapus
  13. De Fikri, secara fungsi zoom dah bagus hasilnya waktu dicoba. Namun maksud Akang kalo ada luang waktu, butuh pencerahan buat ngezoom gambar yg ketika disorot kursor gambar membesar dan melayang (pop-up), mungkin kira2 begitu, tp maaf nih kalo istilahnya kurang keren, pokonya mungkin De Ficri dah tahu maksud Akang. Ditunggu pencerahannya.

    BalasHapus
    Balasan
    1. kalau itu sih mudah, contohnya coba klik gambar di atas, mungkin seperti itu.
      Caranya :
      1. Masuk ke blogger.com
      2. Klik Setelan => Pos dan Komentar
      3. Ganti Tidak menjadi Ya pada bagian "Tampilkan gambar dengan Lightbox"
      4. Lalu klik Simpan Setelan

      Hapus
  14. mau saya coba di blog saya ah :)

    BalasHapus
  15. Makasih ya Mas ,
    Ngebantu banget :D

    BalasHapus
  16. efek zoom yang lain ada gak gan?

    BalasHapus
    Balasan
    1. Gan koq link demonya ketika di klik minta password?

      Hapus
  17. Terima kasih infonya gan, ijin praktek ya,,,, :)

    BalasHapus
  18. Mas gimana bikin pos komentar seperti punya mas ini..

    BalasHapus
    Balasan
    1. maaf mas, saya belum sempet bikin tutorialnnya...

      Hapus
  19. bagus mas artikelnya. tp saya pengen gambarnya klo di klik muncul popup kayak di blognya mas. kayak gambar diatas klo di klik. mohon pencerahannya mas

    BalasHapus
    Balasan
    1. gampang mas,
      klik setelan => pos dan komentar
      lalu pada Tampilkan Gambar dengan Lightbox pilih Ya

      Hapus
    2. udah dicoba kayak gitu gan, tp kok tetep ngga pop up ya gambarnya kalo diklik, mohon pencerahannya dong gan

      Hapus
  20. Saya udah praktekin mas, udah saya ganti pos komentarnya jadi ya . dan gg bisa ..
    Mohon di bantu mas

    BalasHapus
  21. Artikel ini memberikan ilmu baru bagi saya gan...terima kasih..
    sukses selalu...

    BalasHapus
  22. kok diblog saya gak jalan ya mas?

    BalasHapus
  23. mau nanya gan menyimpang dari artikel di atas, gan paling cepat alexa untuk blog di bawah 5 bulan berapa juta, ratus ribu, puluh ribu, atau peringkatnya, karena blog saya rada mandeg di urutan 2,6 umur baru 4 bulan, di balas ya gan

    BalasHapus
    Balasan
    1. tergantung dari blognya juga, jika artikel banyak dan berkualitas tentunya sudah tembus 1 juta, page view 1000 perhari juga sudah bisa tembus 1 juta, kalau alexa itu ya tergantung dari blognya bukan dari lama atau umur blog tersebut

      Hapus
  24. mau nanya , saya sudah menerapkan di blog, tapi ko tetep ga bisa di perbesar

    BalasHapus
  25. ane nyubi diblog, baru buat kemaren.. ehh keren banget tutornya :D nuhun kang :D

    BalasHapus
  26. terimakasih bang... By. Anak Gunungkencana

    BalasHapus
  27. Makasih Tutorialnya gan, sukses buat agan.

    BalasHapus
  28. kalau mau ngasih efek cuma buat beberapa gambar aja gimana ya kang? mohon transfer ilmunya ya kang hehe
    haturnuhun.

    BalasHapus
  29. bolehlah dicoba...... terimakasih... nice post

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting