Cara Membuat Gambar Membesar Saat di Sentuh Cursor di Blog
Mungkin sebagian Blogger sering melihat gambar yang menjadi besar
apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut
dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu
ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang
Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca
postingan kita.
Oke, Langsung saja ikuti Langkah-langkahnya :
1. Masuk ke akun blogger sobat.
2. Pilih Template > Edit HTML.
3. Unduh Template Blog (untuk jaga-jaga)
4. Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol
CTRL+F pada keyboard.
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);
}
5. Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Mudah kan? Oke, Semoga Bermanfaat :)
Komentar
Posting Komentar