Kali ini kita akan membuat efek menjewer pada image (Image Tweak), dimana image/gambar akan bergerak saat di sorot atau terkena kursor. Bagaimana cara membuatnya? Oke, tanpa panjang lebar silahkan ikuti langkah2 membuatnya di bawah ini :
Langkah I
Masuk ke "Dashboard" terus "Layout" lalu "Edit HTML". Untuk berjaga2 dari hal2 yg tidak diinginkan, jangan lupa untuk membackup template anda. Caranya, pertama klik/centang kotak "Expand Widget Templates" kemudian klik "Download Full Template" lalu Save di komputer anda.
Langkah II
Cari kode CSS di bawah ini pada template blog anda :
.post img {
padding: 4px;
border: 0px solid $borderColor;
}
Langkah III
Kalau sudah ketemu kode di atas, sekarang ganti kode tersebut dengan kode di bawah ini :
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}
Catatan : angka 1 pada kode di atas ( top dan left) dapat anda ganti nilainya sesuai keinginan anda. Semakin besar nilainya semakin jauh pula image tersebut nanti akan bergeser.
Langkah IV
Sebagai langkah terakhir, save atau simpan template anda. Sekarang setiap image/gambar yang ada di blog anda akan bergerak apabila tersentuh oleh kursor.
Langkah I
Masuk ke "Dashboard" terus "Layout" lalu "Edit HTML". Untuk berjaga2 dari hal2 yg tidak diinginkan, jangan lupa untuk membackup template anda. Caranya, pertama klik/centang kotak "Expand Widget Templates" kemudian klik "Download Full Template" lalu Save di komputer anda.
Langkah II
Cari kode CSS di bawah ini pada template blog anda :
.post img {
padding: 4px;
border: 0px solid $borderColor;
}
Langkah III
Kalau sudah ketemu kode di atas, sekarang ganti kode tersebut dengan kode di bawah ini :
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}
Catatan : angka 1 pada kode di atas ( top dan left) dapat anda ganti nilainya sesuai keinginan anda. Semakin besar nilainya semakin jauh pula image tersebut nanti akan bergeser.
Langkah IV
Sebagai langkah terakhir, save atau simpan template anda. Sekarang setiap image/gambar yang ada di blog anda akan bergerak apabila tersentuh oleh kursor.
0 comments:
Posting Komentar