Wednesday 22 April 2015

CARA MEMBUAT GAMBAR DENGAN EFEK AUTO ZOOM

Cara Membuat Auto Zoom pada gambar di blog, caranya ga ribet nie, ini caranya ringan dan praktis, singkatnya, Auto Zoom ini bekerja saat Mouse kita arahkan kegambar tesebut, maka secara otomatis gambar akan men Zoom. Ya udach, kita langsung ke caranya aja yu.
Auto Zoom

1.    Masuk ke  Blogger >> Pada Dasbor >> Pilih Template >> Edit HTML >> Expand widget templates
2.  Sekarang cari kode ]]></b:skin>, dan  Copas kode CSS di bawah ini 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: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

Note : Kode yang berwarna Merah, adalah ukuran Zoom, yang akan ditampilkan, sobat bisa merubahnya dengan kehendak sendiri.

3.      Terakhir, Simpan Template

0 komentar

Post a Comment