Dari pengunjung web ini mungkin sebagian sobat cerdas ada yang bertanya-tanya kok bisa ya tiap gambar menjadi besar apabila tersentuh cursor. Nah di dalam dunia blogging fitur seperti ini disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects.
Fitur yang satu ini lumayan banyak di gunakan oleh para blogger loh sobat cerdas karena animasi Zoom nya yang memanjakan mata sobat cerdas.
OK sekarang akan saya berikan tutorialnya untuk sobat cerdas yang ingin coba menggunakan Zoom effects tersebut.
2. Pilih Template > Edit HTML.
3. Ceklis / Centang Expand Widget Template.
4. Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
5. Kalau sudah ketemu, letakkan kode berikut tepat di atas 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); }
Sekarang Sobat bisa melihat efek Zoom efek di blog sobat cerdas.
Semoga tutorial diatas bermanfaat bagi Sobat Cerdas
Tetap berkreasi serta semangat! Salam Sobat Cerdas... ;)
0 comments:
Posting Komentar