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.
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);
}
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