Mempercantik Menu Sidebar Dengan Gaya Tombol

Tampilan sidebar bisa diubah sesuai dengan keinginan kita, asalkan kita bisa bahasa kode HTML. Nah, pada postingan kali ini ana akan memberikan tips untuk membuat menu sidebar layaknya seperti tombol. Kayak gambar dibawa ini :

Mau tau caranya??

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 :   .sidebar li   

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.   

.sidebar li {

line-height:1em;
margin:0px 0px 0;
padding-top:2px;
padding-left:15px;
padding-bottom:4px;
text-shadow:0 1px 0 #Ffffff;
}

Sobat nggak perlu takut jika kode diatas tidak persis sama dengan kode pada blog sobat!

7. Sekarang gantilah semua kode tersebut dengan kode di bawah ini :

.sidebar li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhn6ISbS-V10lNJUWZfEMrX_deGOucmPE_ZTdCVCSgy7822nDe9P8JeLba2JcyoIJk6cJ-df36ALqnQznkCt2NgNuAVTGqX2u0AdYpwXRx-RhRUdKA7UhgXMt5BYjRoEgBhQRUCPNJxNi/s1600/navscreen.png") repeat-x scroll left bottom #ffffff;
border-bottom:1px solid #90969c;
border-right:1px solid #b8b9ba;
border-top:1px solid #ffffff;
margin-border: 0 0px 0;
line-height:1em;
margin:0px 0px 0;
padding-top:2px;
padding-left:15px;
padding-bottom:4px;
text-shadow:0 1px 0 #ffffff;
}
 

Keterangan :

Warna hijau adalah kode dari warna tombolnya. 

Warna merah adalah ukuran ketebalan garis bayangan tombolnya. 

Warna biru adalah kode dari warna garis bayangannya. 

Anda bisa rubah semuanya dengan warna dan tampilan blog anda. Silahkan dicoba!