Untuk membuat simple zoom in seperti contoh gambar di atas (letakkan kursor mouse di atas gambar) bisa dilakukan dengan hanya beberapa langkah yang sangat mudah di bawah ini.
Langkah 1
Log in blog => Dashboard => Design => Edit HTML
Langkag 2
Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Selanjutnya kopi paste kode berikut ini: ]]>skin> atau kode ]]></b:skin> pada ruang Find dan kemudian tekan Enter.
Langkah 3
Kopi paste kode di bawah tepat di atas atau sebelum kode ]]>skin> atau ]]></b:skin>
.post a:hover img {
width:500px; height:400px; float:middle;
}
Contoh:
.post a:hover img {
width:500px; height:400px; float:middle;
}
]]>skin>
Terakhir, klik Preview dan jika tiada pesan error pada layar, klik Save.
Tambahan: Jika efek zoom in terlalu besar atau kecil, anda boleh mengubah ukuran zoom in tersebut dengan menukar angka pada width: 500px dan height: 400px.
Contoh:
width:550px; height:450px; float:middle;
Itu saja. Selamat mencoba...
Tags:
Html
