Cara Membuat Efek Membesar atau Zoom Pada Gambar
20.45.00
54 Komentar
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 :
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;
}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...
ternyata mudah ya mas, tanpa javascript pun bisa.... (y)
BalasHapusiya, pakai css lebih ringan dibandingkan dengan menggunakan javascript... :)
Hapuskok ga ada demonya bos, pengin liat dulu nih...
BalasHapusada tuh, silahkan dilihat... :D
HapusSelamat Pagi Mas Ficri, trik cara yang keren nih Mas bisa membuat gambar
BalasHapusPostingan jadi membesar, jadi gak usah di klik untuk lebih melihat gambarnya
Saya coba dulu. terima kasih atas tutorial zoom pada gambar nya Mas Ficri :)
pagi juga Mas Saud,
Hapusiya betul, tanpa di klik gambar akan terlihat jelas... :)
aiiiiih keren eeuuuy.... lihat demonya jadi pengen.... thanks tuk infonya, Kang Ficri :)
BalasHapusmuhun kang, sama-sama :D
Hapuskembali lagi ke diri masing-masing, mau pasang atau tidak :D
BalasHapuskalau cara membesarkan gambarnya tapi pake objek lain bisa gak mas ?... ya seperti menggunakan jquery gitu lah
BalasHapusoh maksudnya selain menggunakan css,
Hapusada sob bisa dengan memggunakan jQuery...
saya ikutan nyoba ya Mas :)
BalasHapusiya silahkan dicoba, semoga bermanfaat...
HapusYang rabun biar kelihatan hehe
BalasHapuswkwkwk, bisa jadi sob @@
HapusSaya juga memasangnya tapi yang javascript mas.
BalasHapusMakasih mas bisa jadi alternatif kalau begitu buat saya.
lebih baik pakai css mas, karena loading akan lebih ringan...
Hapusmantep 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 :)
BalasHapusoke sama-sama sob...
Hapussiap meluncur... :D
ini sangat simple sekali sob.. dan tidak ribet mudah juga di fahami bagi yang ingin mencobanya.... :)
BalasHapusiya sob, tinggal pasang css doang :D
HapusTrimakasih info'y, bs bikin blog sy tmbh menarik .
BalasHapusiya sama-sama mbak.. :)
HapusDe 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.
BalasHapuskalau itu sih mudah, contohnya coba klik gambar di atas, mungkin seperti itu.
HapusCaranya :
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
mau saya coba di blog saya ah :)
BalasHapusMakasih ya Mas ,
BalasHapusNgebantu banget :D
efek zoom yang lain ada gak gan?
BalasHapusGan koq link demonya ketika di klik minta password?
Hapusterimakasih sangat membantu,
BalasHapusTerima kasih infonya gan, ijin praktek ya,,,, :)
BalasHapusMas gimana bikin pos komentar seperti punya mas ini..
BalasHapusmaaf mas, saya belum sempet bikin tutorialnnya...
Hapusbagus mas artikelnya. tp saya pengen gambarnya klo di klik muncul popup kayak di blognya mas. kayak gambar diatas klo di klik. mohon pencerahannya mas
BalasHapusgampang mas,
Hapusklik setelan => pos dan komentar
lalu pada Tampilkan Gambar dengan Lightbox pilih Ya
udah dicoba kayak gitu gan, tp kok tetep ngga pop up ya gambarnya kalo diklik, mohon pencerahannya dong gan
Hapusmantap bro infonya
BalasHapusijin share juragaan
BalasHapusSaya udah praktekin mas, udah saya ganti pos komentarnya jadi ya . dan gg bisa ..
BalasHapusMohon di bantu mas
Artikel ini memberikan ilmu baru bagi saya gan...terima kasih..
BalasHapussukses selalu...
kok diblog saya gak jalan ya mas?
BalasHapuskeren gan
BalasHapusmau 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
BalasHapustergantung 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
Hapusmau nanya , saya sudah menerapkan di blog, tapi ko tetep ga bisa di perbesar
BalasHapusane nyubi diblog, baru buat kemaren.. ehh keren banget tutornya :D nuhun kang :D
BalasHapusSangat membantu banget nih
BalasHapusterimakasih bang... By. Anak Gunungkencana
BalasHapusMakasih Tutorialnya gan, sukses buat agan.
BalasHapuskalau mau ngasih efek cuma buat beberapa gambar aja gimana ya kang? mohon transfer ilmunya ya kang hehe
BalasHapushaturnuhun.
terima kasih mas
BalasHapusterima kasih mas
BalasHapusikut nyimak bos......
BalasHapusbolehlah dicoba...... terimakasih... nice post
BalasHapus