Cara Menjadikan Judul Sidebar Seperti Tombol

Masih ingin mempercantik judul sidebar blog anda? Pada hal mungkin sebelumnya anda sudah memberi warna background pada judul sidebar tersebut, tapi tetap saja anda merasa belum puas (itu mungkin karena cita rasa seni anda sangat tinggi). Sebab efek background datar memang masih terkesan biasa. Contohnya seperti gambar di bawah ini (lihat pada tulisan Tips dan Trik)


Nah, apakah judul sidebar tersebut masih bisa lebih dipercantik? Jawabannya adalah bisa! Misalnya dengan menyulap judul sidebar tersebut menjadi seperti tombol. Caranya pun cukup mudah. Jika anda tertarik 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. Selanjutnya perhatikanlah beberapa baris kode di bawahnya. Lebih kurang akan tampak 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)

7. Sekarang gantilah semua kode tersebut dengan kode di bawah ini (agar lebih mudah copy saja, lalu paste (timpal) di atasnya):

h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVHaihuqY0Iyynl4bxrT4pU4JaOTObsh7HYTJ-FGiJP_6MZvq9qCOOut4PinRwI3sKyZQavjyqj8fLMV7TByuQFAp9VcvZkWUUt-k1X0Gb_E782lu_DqPFyL9_deUAU4a4_hoh2pdNekZ/s1600/navscreen.png") repeat-x scroll left bottom #d7e8ff;
font-family:verdana;
font-weight:normal;
font-size:13px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
border-bottom: 2px solid #95a4b9;
border-right: 1px solid #7c8a9f;
border-top: 1px solid #ffffff;
}

(Catatan: yang berwarna merah adalah kode dari warna tombolnya dan warna biru adalah kode dari warna garis bayangannya. Anda bisa ganti semuanya sesuai warna blog anda. Jika kesulitan mencari kode warna anda bisa lihat pada Daftar Kode Warna)

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

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

Selamat mencoba dan semoga berhasil!