Efek Tweak

Membuat Efek "Image Tweak" di Blogger

1:26 AM |

Membuat Efek "Image Tweak" di Blogger

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.