Coba yang ini

Search

Membuat Sidebar Dalam Kotak Terpisah Pisah

Untuk apa kita membuat sidebar dalam kotak terpisah ? Jawabanya pasti, supaya blog kita kelihatan lebih menarik dari pada yang lainnya, betul kan ! Tekniknya simpel, yaitu anda tinggal memberi warna yang berbeda antara background widget dengan background di mana widget itu berada, kemudian beri jarak antara widget yang satu dengan yang lain dengan menggunakan perintah “margin” dalam hal ini margin-bottom (margin bawah), dan agar lebih terkesan kotak, maka widget tersebut di beri perintah border.

Dimanakan kode widget itu berada? setiap template tentunya berbeda satu sama lain, jadi bagaimana mencarinya ? Gampang, cari aja kode yang ada tulisan Widgetnya pasti ketemu betul gak, hahaha.. seperti contoh dibawah ini :

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

Namun dalam kasus di atas, ada dua kode widget yang di definisikan sama yaitu sidebar widget (halaman sidebar) dengan main widget (halaman posting) sehingga kedua widget tersebut akan selalu sama. Agar lebih flexibel dalam proses pengaturan widget, sebaiknya kode tersebut kita buat terpisah, sehingga kodenya jadi 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;
<}

Dengan kode di atas, maka anda tinggal menambahkan warnanya saja, gampang bukan.

Contoh untuk memberikan kesan sidebar widget mempunyai kotak yang terpisah-pisah anda bisa membuat variasi kode seperti ini :

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

Sedangkan untuk main.widget tinggal experiment sobat aja gimana bagusnya. Langkahnya sama dengan sidebar.widget

Selamat mencoba