Membuat Sidebar terpisah dan Berkotak-kotak

wah udah lama nih.. ga' mengisi dan mengotak-atik siblog.. soalnya saya beberapa hari ini lagi sibuk.. jadi baru bisa nge-Blog lagi seperti biasayanya.. beberapa waktu lalu saya mengunjungi blognya kang-rohman disana kang- rohman menulis artikel tentang cara membuat sidebar agar terlihat terpisah-pisah, persis kayak blog milik kang rohman, Nah dari situ saya menulis artikel ini ya itung-itung penyebar ilmu yang baek biar yang baca dapat berguna dan bisa dipaktekin.Nah nih gambar blog kang rohman... Sidebarnya terlihat terpisah-pisah kan..

 

Dari gambar diatas.. bisa di lihat sidebarnya terpisah dan seperti kotak-kotak lagi, jadi terkesan rapi blognya mo tau cara buatnya biar bisa jadi kayak gitu?? ha.. baca terus ya biar ngerti...

Nah cari kode Sidebar Widgetnya seperti:

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

Pisah ketiga kode ini.. biar ga' bingung jadinya.. (kode ini terdapat pada template minima) tapi bila sidebar widget dengan main widgetnya udah terpisah.. dibiarrin aja, nah setelah dipisah maka jadinya seperti ini:

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

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

Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu:
kode pada Sidebar . Widger dimodifikasi jadi

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

1. Background merupakan latar belakang blog bisa diganti dengan warna yang sesuai
2. Border 1 px dotted #6c6b6b; merupakan garis yang mengelilingi wiget sebesar 1pixel
3. Margin merupakan jarak kebawah antara widget yang 1 dengan yang lainnya sebesar 1,5em
4. Padding memberikan sela 0,5em

Nah, keempat hal inilah yang dapat membuat sidebar seakan-akan terpisah dan berkotak-kotak..

Nah silahkan mecoba ya