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
20 komentar
Click here for komentarInfonya keren
Replyblogs ane jadi tambah berwarna berkat post ini :D
iyah gan, makaseh, :)
Replyhahaha bener bener tuh, :)
follow terus blog sya y, :)
Trims sob, keren ya, hehe.. Semangat terus ngeblognya sob, Karena kita sama-sama blogger.. :D
Replytriknya bagus gan, berguna buat blogger" kyk kita :D
Replywah perlu di coba ni yang seperti ini.. nice info gan.
ReplyNice post gan.. Bisa saya coba :)
Replyokeh gan, siip dah, :)
Replyy gan, semoga bermanfaat y, :)
Replymonggo gan, semoga bermanfaat y, :)
Replyokeh siip dah, semoga bermanfaat y, :)
Replymantap gan nice info makasih
Replyiyah gan, smga bermanfaat y, :)
ReplyApalagi ini. Ane jadi tambh pengetahuan. Mntb bro yakin. Ane cobalah ya....
Replywah nice post gan :)
ReplyThanks for info.. please visit to my blog too
Replyhttp://cyber-situation.blogspot.com/
Thanks for info.. please visit to my blog too
Replyhttp://cyber-situation.blogspot.com/
iyah gan, smga bermanfaat y, :)
Replyterima kasih gan, smga dapet berkah nyh y, :)
Replyokeh gan, makasih, dan siap meluncur, :)
Replymohon tidak meletakan Link Aktif dalam komentar, :)
ReplyTerima kasih, :)
*Berkomentarlah Sesuai Topik, dan Sopan Santun.
*Jangan Lupa Untuk Follow Blog, 100 % Follow Back, :)
ConversionConversion EmoticonEmoticon