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;
}
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;
}
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...
0 komentar:
Posting Komentar