Cara Merubah Warna Menu Navigasi Home atau Beranda Blog

Perbedaan kode HTML pada setiap Template blog sering kali membuat bingung kita yang ingin memodifikasi tampilan blog kita sendiri, bermacam tutorial di internet tidak mesti bisa diterapkan di template kita, hal ini saya alami ketika ingin merubah warna menu home template blog saya Vikka Fast and Responsive Blogger Template yang memiliki warna yang sama di setiap kategori menunya, kebetulan saya ingin meniru tampilan template blog lain yang pada menu homepage nya memiliki warna yang berbeda dari kategori menu lainnya (warna tunggal), hari demi hari browsing nyari tutorial tentang bagaimana cara mengganti warna menu navigasi hanya pada menu homepage nya saja, namun hasilnya nihil, tidak ada satupun tutorial yang menjelaskan bagaimana caranya, mungkin karena ini hanya masalah sepele saja. Karena cukup lelah saya mencari kesana-kemari dan tidak membuahkan hasil, akhirnya saya memberanikan diri untuk bertanya pada Mbak Arlina yang membuat template Vikka Fast and Responsive Blogger Template ini. Hari berganti hari saya mantengin forum Disqus blognya Mbak Arlina dengan harapan mbak Arlina menjawab pertanyaan saya, sampai tiga kali saya repost pertanyaannya,tetap hasilnya pun nihil, sampai sekarang pun tidak ada balesan jawaban dari Mbak Arlina. Hmmm, andai saja mbak Arlina membaca artikel ini, saya harap Mbak Arlina bisa memberikan jawaban atau alasan kenapa tidak menjawab pertanyaan saya, hehe.

Sudah tidak ada jalan lain lagi, selain melakukan eksperimen sendiri, dalam hati saya pun berkata: penasaran banget sumpah gimana sih caranya ngerubah warna menu navigasi homepagenya, pasti ada caranya ini, cuman belum ketemu aja kode nya. Kebetulan saya memiliki sebuah blog lain yang sering saya utak-atik untuk bahan percobaan, jadi jika ada kesalahan tinggal upload lagi file .xml template Vikka nya. Setiap hari saya uji coba beberapa kode "main navigation"nya, namun banyak sekali kegagalan dan kesalahan yang saya lakukan dalam memodifikasi kodenya. Alhasil template blog uji cobanya jadi berantakan, hehe. Gagal coba lagi, gagal coba lagi, gitu terus setiap hari. Blog utama pun jadi mandul, karena gak update artikel. Sempat frustasi karena gagal terus, akhirnya saya tinggalkan eksperimennya, dan lanjut bikin artikel lagi. Tidak disangka beberapa hari kemudian penyakit penasarannya kumat lagi, jadi gak fokus nulis artikel. Akhirnya saya lanjutkan eksperimennya, dengan tekad yang bulat dan niat yang serius akhirnya hari itu juga saya menemukan bagaimana cara merubah warna menu navigasi homepage nya, alhamdulilllaaaaaahhh seneng dan legaaa banget rasanya, ada rasa bangga bisa menemukan dan membuat kode nya sendiri berkat hasil uji coba, dan ternyata kode nya sangat simpel buanget, cuman dikit. Bagi sobat yang ingin mengetahui caranya, yuk simak tutorialnya.

Sebelumnya sobat harus mengetahui terlebih dahulu ID dari "Main Navigation/ Menu Navigasi" template blog sobat, setiap template berbeda ID nya, contoh ID main navigation template saya adalah #navi-arlina, setelah ketemu ID main navigation template sobat, sekarang copy kode CSS di bawah ini dan pastekan tepat diatas kode ]]></b:skin>.

#navi-arlina li span.home {display:block;background:#FF7519}

Kode yang saya warnai merah merupakan ID main navigation dari template saya, ganti dengan ID main navigation template sobat, berikutnya kode yang saya warnai biru merupakan kode warna dari menu navigasi homepage saya, ganti sesuai dengan warna yang sobat inginkan, untuk memilih warnanya, sobat bisa kunjungi color-hex.com. Kode CSS diatas saya dapatkan berdasarkan kode HTML menu homepage template saya seperti di bawah ini:

<li><span class='home'><a expr:href='data:blog.homepageUrl'>HOME</a></span></li>

Untuk merubah warna menu navigasi homepagenya intinya ada pada ID main navigation, li, span, dan home. Apakah kode HTML homepage template saya sama dengan punya sobat? Jika sama, berarti sobat tinggal copas aja kode CSS diatas ke dalam template sobat, namun ingat, ganti dulu ID main navigation nya seperti yang sudah saya jelaskan diatas. Selamat mencobanya sob, jika ada kendala seputar masalah diatas, sobat bisa tanyakan pada kolom komentar di bawah artikel ini. Terima kasih sudah berkunjung di blog saya, sampai jumpa di artikel lainnya.