Masih pada tutorial efek blog, kali ini saya ingin berbagi tentang bagaimana cara membuat efek zoom in pada sebuah gambar yang sobat posting atau gambar lain nya yang ada di blog sobat.
Sebagai contoh, silahkan sobat arahkan cursor sobat pada gambar yang ada didalam kotak dibawah ini.
Bagaimana? apakah sobat tertarik untuk mencobanya. Jika iya mari kita lakukan langkah-langkahnya:
Sekarang blog sobat sudah memiliki efek zoom.
Dan untuk yang teman-teman yang ingin mencoba trik ini, silahkan ikuti langkah-langkah yang sudah saya tuliskan diatas.
Semoga postingan kali ini bermanfaat untuk kita semua. Terima kasih atas kunjungannya. Salam BLOGGER
Kritik dan Saran silahkan sisipkan di kolom komentar
Sebagai contoh, silahkan sobat arahkan cursor sobat pada gambar yang ada didalam kotak dibawah ini.
Bagaimana? apakah sobat tertarik untuk mencobanya. Jika iya mari kita lakukan langkah-langkahnya:
- Langkah pertama sobat harus sign in dulu ke blog sobat
- Klik template kemudian pilih Edit HTML
- Pada HTML blog sobat, silahkan sobat cari kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
- Jika kode sudah ]]></b:skin> ketemu.
- Copy dan pastekan kode dibawah ini tepat di atas kode ]]></b:skin>
- Jika sudah, klik save / simpan dan silahkan sobat lihat hasilnya
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Sekarang blog sobat sudah memiliki efek zoom.
Dan untuk yang teman-teman yang ingin mencoba trik ini, silahkan ikuti langkah-langkah yang sudah saya tuliskan diatas.
Semoga postingan kali ini bermanfaat untuk kita semua. Terima kasih atas kunjungannya. Salam BLOGGER
Kritik dan Saran silahkan sisipkan di kolom komentar
Berikanlah komentar yang membangun