Modifikasi Sidebar di Blogspot

Tampilan blog sepenuhnya ditentukan oleh theme yang kita pilih. Dari Menu Presentation terdapat sub menu yang ada tergantung dari masing-masing theme yang tersedia. Theme-theme itu ada yg bisa di kostumasi dan ada yang tidak. Pada submenu Sidebar Widgets, kita bisa banyak melakukan kustomasi. Dengan drag and drop widgets bisa dipindahkan ke dalam sidebar kemudian menatanya sesuai kehendak kita.

Tampilan sidebar setiap template berbeda-beda, jadi jika kita ingin sidebar yang menarik kita mesti merubahnya dengan mengedit kode HTML. 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 :

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 Dasboard blog anda lalu klik Design/Rancangan, kemudian pilih pada Edit HTML

2. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

Cara Mempercantik Menu Sidebar dengan Tombol

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 di atasnya):

.sidebar li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hMovGIeAnB4cCZcdmT3Yl-rAl0YVwSVpl1FQabQOpDPqcl8RjA_dZMkx7BQrdmKv0wlO6cs0yG6626jzbnQiM6pycK0tAr6_LnTQ5iQ360ViR-UNFZbI6C63_G8Nh8oKcg7twP32yoc1/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.