0 Sidebar dalam Kotak Terpisah

rik blog kali ini akan membahas tentang bagaimana membuat element sidebar menjadi terpisah kotaknya. Artinya, tiap widget didalam element sidebar akan berada pada kotak yang berbeda.

Bagaimana contohnya, bisa lihat saja diblog Ayas ini atau disini.

Kelebihan menggunakan trik sidebar dalam kotak terpisah ini adalah blog menjadi terlihat lebih profesional (menurut Ayas c).

Trik ini mudah kok. Yuk kita pelajari bersama trik membuat sidebar dalam kotak terpisah ini....


Pertama, yang harus kita lakukan adalah mengetahui warna 'body' blog kita.

Contoh, warna 'body' blog Ayas adalah putih alias #ffffff. Maka, kita ganti warna background sidebar kita dulu. Caranya, cari kode ini :

#sidebar-wrapper

Maka akan ketemu kode berikut :

#sidebar-wrapper {
margin-$endSide: 10px;
width: 240px;
float: $endSide;
background-color: #ffffff;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Pada 'background-color', nilainya samakan dengan warna body Sodara.

Kalau dah, sekarang sidebar sudah tersamarkan.

Selanjutnya baru memanipulasi widget dalam sidebar agar terlihat menjadi dalam kotak-kotak terpisah.

Pertama, cari kode ini :

.sidebar .widget {

Tambahkan kode2 seperti ini :

margin-bottom: 1em;
padding-bottom: .5em;
background:#f2f2f2;
border:1px dashed #a9a9a9;

Sehingga, kode untuk widget pada sidebar akan menjadi seperti ini :

.sidebar .widget {
margin-bottom: 1em;
padding-bottom: .5em;
background:#f2f2f2;
border:1px dashed #a9a9a9;
}

#f2f2f2 silahkan ganti kode warna dengan warna untuk widget Sodara

#a9a9a9 ganti dengan kode warna untuk garis tepi tiap widget.

Klo dah, tinggal save, trus liat hasilnya. Jadi kan?

Oya, sebenernya, tidak perlu mengganti warna sidebar menjadi sama dengan warna body juga gpp2, asalkan warna sidebar widget nya harus beda me warna sidebar. Ok?

Sekedar info, widget sidebar sebenarnya sudah dalam kotak terpisah, cuma perlu dimanipulasi dikit backgroundnya, agar lebih 'terlihat' terpisah.

Selamat mencoba!!!
Contoh
Sumber