Memberi Background Menu Teks di Bawah Header ~ Black On The Blog

Pada posting sebelumnya saya telah menulis Membuat Menu di bawah Header. Nah untuk mempercantik menu tersebut bisa dilakukan dengan memberi warna latar pada teks tersebut. Caranya adalah:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

4. Kemudian carilah kode: ]]>

5. Masukkan kode berikut tepat di atasnya.

a.tombol1{
   background:#993300;
   padding:3px;
   color:#ffffff;
}
a.tombol2{
   background:#993300;
   padding:3px:
   color:#ffffff:
}
a.tombol3{
   background:#993300;
   padding:3px;
   color:#ffffff;
}

Kode #993300; adalah warna latar belakang teksnya. Jika ingin warna yang lain gantilah kode warna tersebut. Agar mudah mencari kode warna bisa dilihat disini . 3px; adalah jarak (bis) antara kotak latar belakang. Bisa diganti angkanya menjadi berapa yang anda inginkan. Sedangkan #ffffff; adalah kode warna untuk bis tersebut.

6. Hasilnya akan menjadi seperti gambar di bawah ini. Jika penulisannya sudah tepat jangan lupa klik SIMPAN TEMPLATE.

padding:0;
{
a.tombol1{
   background:#993300;
   padding:3px;
   color:#ffffff;
}
a.tombol2{
   background:#993300;
   padding:3px:
   color:#ffffff:
}
a.tombol3{
   background:#993300;
   padding:3px;
   color:#ffffff;
}
]]></b:skin>
<style>

7. Sekarang masuklah ke Elemen Laman. Lalu klik Edit pada Gadget HTML/Javascript atau pada gadget html yang telah dibuat sebelumnya (seperti yang telah dilakukan pada Membuat Menu di bawah Header).

8. Kemudian sisipkan setiap baris dari kode ini sesuai dengan tempatnya masing-masing. Dalam contoh ini saya menggunakan 3 menu teks (Home,Template dan Software). Maka sisipkanlah alamat (URL) dari ketiga Url halaman menu tersebut.

class=”tombol1″(isi dengan URL Home)
class=”tombol2″(isi dengan URL Template)
class=”tombol3″(isi dengan URL Software)

9. Sehingga penulisannya menjadi seperti ini.

<a href=”http://www.NAMABLOG.com”>HOME</a>
<a href=”http://www.NAMABLOG.com/search/label/Template”>TEMPLATE</a>
<a href=”http://www.NAMABLOG.com/search/label/Software”>SOFTWARE</a>

10. Terakhir klik SIMPAN.

11. Sekarang lihatlah hasilnya. Jika penulisan kodenya benar,maka latar belakang menu teksnya sudah berwarna,seperti gambar di bawah ini.