Cara Membuat Hover pada Background Sidebar Widged

Tutorial BloGGeR dan Panduan BloGGeR tentang Widget :

Hover pada background berfungsi untuk merubah warna background ketika mouse berada di atas bagian tersebut. Sebagai contoh : pada saat kita melihat ada sesuatu yang menarik pada sebuah blog, ketika cursor belum kita arahkan ke bagian tersebut masih berwarna hitam (ini misalnya !), tetapi begitu cursor mulai menyentuh ruang pada bagian tersebut, secara tiba-tiba seluruh bagian ruang (kolom) tersebut menjadi berwarna biru tua, dan bahkan mungkin muncul garis tepi (border). Kondisi seperti ini bisa terjadi karena penggunaan "hover". Secara sederhana pengertian fungsi hover adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah : background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link).

Cara untuk membuat Hover pada Background Sidebar Widged

1. Login ke Blogger.
2. Amankan Template (lihat di sini !).
3. Tetap di Edit HTML kemudian cari KODE CSS :

.sidebar .widget{ 
        margin: ...px;
        padding: ..px;
        ....
        ....
}

4. Tambahkan KODE CSS baru di bawah syntax tersebut seperti KODE di bawah ini :

.sidebar .widget:hover{
        background:black;
}

sehingga bentuknya menjadi :

.sidebar .widget{ 
        margin: ...px;
        padding: ..px;
        ....
        ....
}
.sidebar .widget:hover{
        background:black;
}

- Gantilah warna "black" dengan warna yang sesuai dengan warna font/teks pada blog anda !
5. Jangan lupa KLIK Simpan Template !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «