Cari Artikel Blog Ini

Total Tayangan Halaman

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...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

Tri denda mengatakan...

Izin menyimak artikel keren ini..
Artikelnya sangat Mudah dimengerti, makasih bangett yaaa....??

Ades Sambas mengatakan...

@Tri denda Trim's atas kehadiran agan di blog ane.
Jalin terus persahabatan sesama peblogger...

Edyn Laskar mengatakan...

Makasih mas infonya sangat bermanfaat, kebetulan lg butuh nih tutorial yg kyak ghini untuk menghiasi blog supaya cantik kyak blog ini,,,

Ryan Zapple mengatakan...

o iy ka "Zapplerepair pengerjaan di tempat. Zapplerepair memberikan jasa service onsite home servis pengerjaan di tempat khusus untuk kota Jakarta, Bandung dan Surabaya dengan menaikan level servis ditambah free konsultasi untuk solusi di bidang data security, Networking dan performa yang cocok untuk kebutuhan anda dan sengat terjangkau di kantong" anda (http://onsite.znotebookrepair.com)
“Zapplerepair Apple dan Smarphone specialist
telp: 087788855868
website: http://indonesia.zapplerepair.com/

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!