Cara Mempercantik Menu Sidebar dengan Tombol

Salah satu keluhan umumnya pengguna blogspot (termasuk saya) adalah tampilan sidebar yang kurang menarik. Apalagi jika masih menggunakan template bawaan blogspot. Sehingga di awal-awal blogging saya sempat kecewa dan berniat ingin beralih menggunakan Joomla. Tapi setelah sedikit mempelajari bahasa kode (HTML) dan struktur template blogspot (plus kreativitas tentunya), ternyata tampilan sidebar malah bisa dirubah sesuai keinginan kita, bahkan bisa menyamai tampilan web yang menggunakan software website yang lebih canggih.

Di bawah ini adalah contoh tampilan menu sidebar yang belum dipoles, sehingga tampak masih datar (meskipun judulnya sudah di rubah menjadi seperti tombol):

Cara Menjadikan Menu Sidebar Seperti Tombol

Nah, sama dengan judulnya, menu sidebar tersebut sebenarnya juga bisa disulap menjadi seperti tombol. Caranya yaitu dengan menambahkan beberapa kode pada halaman HTMLnya. Lebih lengkapnya bisa anda ikuti beberapa langkah berikut:

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

Cara Mempercantik Menu Sidebar dengan Tombol

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

(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):

.sidebar li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiEoiUcRKtmlNMuenIgrhx36EeQeO4eHQyLaE1IMEq8B9d_hrG-aMXvgeqgwKaGUhrHFlPuyjuJO5BDnsAbiXpvh8YUaz8svGLQdP5vjsXDaulMLQ_9V4re0h-SPQTG8sO-njye997YhK/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;
}

(Sebagai catatan yang berwarna hijau adalah kode dari warna tombolnya. Warna merah adalah ukuran ketebalan garis bayangan tombolnya. Sedangkan yang berwarna biru adalah kode dari warna garis bayangannya. Anda bisa rubah semuanya dengan warna dan tampilan blog anda. Jika kesulitan dalam menentukan kode warna maka anda bisa lihat pada Daftar Kode Warna.

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