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 . Sebab efek background datar memang masih terkesan biasa.

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 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;
}

(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/AVvXsEge5Af9Agu0x-enOlOywGJPQrp5M7kea4B3AwHhyESJdH6PXxjpVUCVo_m9kK8znhQXwZGVPQ6uSRSYlqyBpuSlWVOCJjuWt6IV3Bt8Kogx738InBty3OYDTuVjJvqMO0M5xCb1mfozf1Ka/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;
}
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!

0 komentar: