Cara Memberi Warna Background pada Judul Sidebar

Apakah anda kurang puas dengan tampilan judul sidebar blog anda yang masih standar? Misalnya masih datar tanpa variasi. Jika ya, sebenarnya tampilan itu bisa dipercantik dengan memberi warna background pada judul sidebar tersebut. Caranya pun sangat mudah.

Tapi sebelumnya, menyangkut dengan huruf yang ada pada sidebar, perlu dibedakan 2 hal. Pertama Judul Sidebar, yaitu nama atau pengelompkkan dari setiap widget sidebar. Letaknya di bagian atas setiap widget (seperti tulisan Tips dan Trik pada contoh di bawah). Kedua adalah Menu Sidebar, yaitu link yang terdapat pada kolom sidebar (contohnya tulisan Buat Blog, Ebook, dan Email pada gambar di bawah). Seluruh judul posting yang terdapat pada Arsip Blog juga termasuk sebagai menu sidebar.


Nah, untuk memberi warna background pada judul sidebar ini anda bisa lakukan beberapa langkah berikut:

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:    h2 {

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.


6. Nah, sekarang sisipkanlah kode ini:    background:#A9D0F5;  di bawahnya. Soal urutan penempatannya tidak menjadi masalah. Sebagai catatan yang berwarna merah adalah kode dari warna backgroundnya. Anda bisa rubah sesuai dengan warna yang anda inginkan. Jika kesulitan dengan kode warna anda bisa lihat dulu Daftar Kode Warna. Sebagai contoh cara penyisipannya akan terlihat seperti di bawah ini:

h2 {

background:#A9D0F5;

font-family:verdana;
font-weight:bold;
font-size:14px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
}

(Anda tidak perlu bingung jika semua kode di atas tidak persis sama dengan kode yang terlihat pada blog anda, karena itu tergantung pada template yang kita gunakan . Yang penting adalah anda sudah menyisipkan sebaris kode tadi)

7. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai.


8. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog.

9. Sebagai contoh hasilnya akan tampak seperti ini:


Selamat mencoba dan semoga berhasil!