0 MENAMPILKAN HOVER PADA BLOG

Menurut mbah google hover diartikan melayang. Tapi jika pengertian itu digunakan pada tips ini jelas akan menimbulkan keraguan dalam memahami hover.
Pengertian hover menurut admin EPG Studio adalah : perubahan tampilan dari bagian blog ketika disorot mouse.
Dari pengertian diatas, anda kan lebih memahami dengan demo yang ditampilkan pada blog EPG Studio, yang dapat anda lihat pada bagian tab menu dibawah header, halaman pencarian dibagian bawah dan dibagian sidebar. Coba anda sorotkan mouse ke bagian yang disebutkan tadi untuk melihat hover yang telah dipasang.
Hover dapat dipasang pada seluruh bagian blog dengan syarat anda telah memahami bagian bagian dari blog yang anda kelola.
Sebagai contoh pemasangan hover pada bagian body blog. Terlebih dahulu anda harus tahu kode body pada template. Misalnya kode itu seperti ini :

body {
font: $(body.font);
color: $(body.text.color);
background:black;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}


Dari kode diatas terlihat bahwa warna dari body dipasang dengan warna hitam dan jika anda ingin menampilkan warna lain ketika mouse berada pada bagian body tinggal menambahkan kode seperti ini tepat dibawah kode body diatas :


body: hover {
background:red;
}


Dari kode yang ditambahkan diatas, body blog yang tadinya berwarna biru akan berubah menjadi warna merah ketika mouse disorotkan ke bagian body dan akan kembali menjadi hitam jika mouse meninggalkan bagian body.
Secara lengkap bagian body blog yang telah ditambahkan hover akan menjadi seperti ini :


body {
font: $(body.font);
color: $(body.text.color);
background:black;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
body: hover {
background:red;
}

setelah menambahkan hover pada bagian body, simpan perubahan yang anda buat, kemudian lihat blog anda yang telah dipasang hover.
Jika anda suka tampilan latar blog dengan sebuah image dengan hover juga sebuah image, lakukan cara yang sama dengan langkah-langkah diatas.
Jika anda belum memahami cara mengganti background blog dengan image klik disini untuk mempelajarinya.
Setelah mempelajari mempelajari background blog dengan image, sekarang anda dapat memasang hover background blog dengan image.
Kode dibawah ini merupakan kode dari bagian body yang telah dipasang image sebagai background blog.


body {
font: $(body.font);
color: $(body.text.color);
background:black url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Tambahkan kode ini tepat dibawah kode body diatas


body:hover {
background:black url(http://img36.imageshack.us/img36/9214/44128720.jpg?imgmax=100%) repeat-x fixed top center;
}


Secara lengkap kodenya akan menjadi seperti ini :
body {
font: $(body.font);
color: $(body.text.color);
background:black url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
body:hover {
background:black url(http://img36.imageshack.us/img36/9214/44128720.jpg?imgmax=100%) repeat-x fixed top center;
}

Jangan lupa bedakan url gambar pada bagian body { dengan bagian body:hover {
Setelah anda mencoba pada bagian body, coba pula pada bagian lain dari blog.
Selamat mencoba, semoga bermanfaat...!!!

Read more: http://epg-studio.blogspot.com/2012/04/menampilkan-hover-background-blog.html#ixzz1sNhRm1J4