Menannggapi sebuah comment dari neng Lia yg berbunyi sebagai berikut : "makasih banyak sobat atas sarannya..sudah saya pasang tuh..tapi koq warnanya itam dan tulisannya gak keliatan, gimana cara ganti warnanya ya??" . nah pada akhirnya k'ian berinisiatif ngebuat sebuah postingan tentang cara pengaturan menu Navigasi , mulai dari pemilihan Border, warna huruf sampai dengan format designnya...
Tanpa pikir panjang lagi kita langsung aja yach..
Langkah pertama adalah : masuk kedalam format Edit HTML dari blog kamu,
Kemudian beri tanda centang atau ceklist pada kolom " expand template widget", kemudian cari kode berikut :
1. Untuk merubah warna Background / latar belakang
jika sudah ketemu ( kode mungkin akan berbeda tergantung dari tiap templatenya), cari pada kode background : #000000; , yang terdapat pada baris pertama dari kode diatas menunjukkan warna backgroundnya adalah warna hitam. Kamu bisa ganti dengan warna favorit kamu ( lihat di widget kode warna disamping ini ) atau jika kamu ingin menghilangkan warnanya, caranya adalah dengan menghapus kode #000000 pada kode Background:#000000; . sehingga hasilnya akan sbg berikut :
2. Merubah warna tulisannya
cari kode berikut :
Tanpa pikir panjang lagi kita langsung aja yach..
Langkah pertama adalah : masuk kedalam format Edit HTML dari blog kamu,
Kemudian beri tanda centang atau ceklist pada kolom " expand template widget", kemudian cari kode berikut :
1. Untuk merubah warna Background / latar belakang
#foxmenucontainer{
height:34px;
background:#000000;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu ,#menu ul {
margin: 0px 5px 0px 5px;
padding: 0px;
list-style: none;
height:34px;
}
#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#5D0909;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#DFC3C3;
}
#menu li li a:hover, #menu li li a:active {
background:#971515;width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}
#menu li ul {
position: absolute; width: 150px; left: -999em;
z-index:200;}
#menu li:hover ul {left: auto;
display: block;}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
jika sudah ketemu ( kode mungkin akan berbeda tergantung dari tiap templatenya), cari pada kode background : #000000; , yang terdapat pada baris pertama dari kode diatas menunjukkan warna backgroundnya adalah warna hitam. Kamu bisa ganti dengan warna favorit kamu ( lihat di widget kode warna disamping ini ) atau jika kamu ingin menghilangkan warnanya, caranya adalah dengan menghapus kode #000000 pada kode Background:#000000; . sehingga hasilnya akan sbg berikut :
#foxmenucontainer{sedangkan kode warna pada background dibawah ini menunjukkan warna background yang akan muncul ketika kursor mouse diarahkan. Jadi kamu bisa menentukan apakah akan diberi warna atau tidak tergantung apakah kamu akan pasang kode warnanya atau tidak.
height:34px;
background:;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu li li a:hover, #menu li li a:active {
background:#971515;
width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}
2. Merubah warna tulisannya
cari kode berikut :
#menu a {pada kode yang berwarna orange tsb menunjukkan warna tulisannya, sedangkan pada kode yang berwarna merah ini (dibawah ini) menunjukkan warna yg akan muncul ketika kursor mouse kita arahkan.
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}
#menu a:hover {nah jika sudah kamu bisa melihat hasilnya terlebih dahulu sebelum disimpan dengan meng-klik tombol pratinjau atau preview. selesai silahkan disimpan...
color: #fff;
display: block;
text-decoration: none;
}
hehe..asiik..makasih banyak ya sobat atas bantuannya..
thank agan