Tutorial Membuat Efek Auto Zoom Pada Gambar Postingan

Zoom berfungsi untuk memperbesar atau memperkecil penglihatan sebuah gambar. Dengan memberi efek zoom di gambar artikel kita, maka akan membuat blog kita lebih terlihat menarik dan juga mengurangi berat loading blog apabila menggunakan gambar yang besar.

Cara pembuatannya cukup mudah dan simple, langsung ke tips cara membuatnya. Artikel Cara Merubah Background Blog dengan Gambar dapat anda baca juga.

MONGGO DISIMAK..!!

Cara Membuat Efek Zoom pada Gambar :

• Login ke akun blogger
• Masuk ke Dasbor Pilih Template Kemudian Klik Edit Html

• Lanjutkan Beri centang "Expand Template Widget".
• Kemudian cari kode ]]></b:skin> dengan menekan tombol CTRL + F 

• Kemudian letakan script dibawah ini tepat diatas kode ]]></b:skin>

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

Atau Bisa Juga Scrip Dibawah Ini :

/* Image Auto Size ----------------------------------------------- */ .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); } .post-body img {padding:5px; background:#FFF; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;} .post-body img:hover {border-radius: 0% 10%; box-shadow: 0px 0px 5px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer;}

• Lihat contoh peletakan scrip diatas code ]]></b:skin> 

•  Kemudian Save Template dan Lihat Hasilnya

Begitulah cara sederhana untuk menampilkan gambar posting membesar apabila tersentuh mouse di blog. Semoga panduan dan tutorial cara membuat efek zoom pada gambar tersebut dapat bermanfaat.

Terimakasih Atas Kunjungan Anda...