Membuat Area Sidebar Dalam Kotak Terpisah

Membuat Area Sidebar Dalam Kotak Terpisah
udah pada tau ya apa itu sidebar kan, jadi ga perlu diterangkan lagi. Sekarang kita akan membuat sidebar dalam kotak yang terpisah. Artinya adalah menambahkan pembatas di sekeliling sidebar agar terpisah dari area di sekitarnya seperti area posting. Seperti biasa, acuan yang saya gunakan adalah template minima white blogger. Perbedaan dengan template anda bisa saja terjadi namun tidak banyak karena semua template blogger masih mirip koq. Oke langsung saja ke cara pembuatannya.

1.Login ke blogger dengan id anda
2.Silahkan tuju Tata Letak
3.Pada tab menu pilih Edit HTML
4.Klik kotak kecil Expand Template Widget
5.Untuk backup, silahkan klik teks Download Template Lengkap
6.Cari kode ini :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Hapus kode di atas dan ganti dengan kode ini :

.sidebar .widget {
background:#fff url(http://i38.tinypic.com/2lt5wsl.jpg) repeat-x top;
border:1px solid #0B610B;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}

7.Berikutnya klik tombol Simpan Template
8.Selesai
Pada kode yang diganti, saya telah menyisipkan sidebar header background. Silahkan dihapus atau dimodifikasi lagi asalkan disesuaikan dengan desain template anda. Gambar berikut dapat menjelaskan ilustrasi perubahan yang terjadi :

NI contoh Sidebar tanpa border pembatas :



Sidebar dengan border pembatas dan header background Nanti sobat jadinya akan seperti ini :



Baguskan Jadinya..