Membuat Gambar Membesar Bila Disentuh Cursor

Posted by Arsyad 32 on Selasa, 31 Desember 2013

Hay  pasti sehat semua kan. kali akan membahas tutorial blog tentang cara membuat gambar Membesar saat disentuh kursor, tak jarang kita pernah berkunjung ke beberapa blog dan menemukan suatu gambar yang saat disentuh kursor membesar dalam dunia blogging ini disebut Image Zoom Effects atau Hover Zoom Smooth Effects. fitur ini banyak digunakan dengan alasan hiasan blog atau agar pengunjung bisa melihat gambar dengan jelas bila gambarnya membesar. Kalo Sobat mau pasang di blognya Ikuti Langkahnya:

  • Masuk ke akun blogger sobat
  • Pilih Template >> Edit HTML
  • Kemudian Cari kode ]]></b:skin>.  untuk mempermudah pencarian tekan Ctrl+F pada keyboard
  • Bila Sudah ketemu, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>
.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); }
  • Kemudian tinggal klik Simpan Template, dan lihat hasilnya
Semoga Tutorial ini bisa membantu sobat. Wassalamualaikum warahmatullahi wabarakatu.

Blog, Updated at: 03.43

0 komentar:

Posting Komentar