Sidebar dalam Kotak Terpisah

kampanye damai pemilu indonesia 2009 Trik 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!!!

8 comments:

  1. selalu bahasannya simple dan mudah dipahami
    sepppp ...

    ReplyDelete
  2. tips menarik dan bermanfaat... thanks teman...

    ReplyDelete
  3. setelah di liat2 easyblogtrick lebih rapi. dari sebelumnya pake trick yg di post, sekarang gak lg!
    gak mo dibagi yach tricknya?

    ReplyDelete
  4. @minori hehehe9 maksudnya gimana pren? q g ngerti..

    ReplyDelete
  5. maaf kl kurang jelas, kmrn kan garisnya putus2, skrg gak lg. kan terkesan lbh rapi. tp makasih kok aq dah coba2.

    ReplyDelete
  6. Maz,
    Di blog saya kan garis tepi sidebarnya putus2.
    Biar bisa nyambung dan tebal kaya seperti blog ini caranya bagaimana????

    Mohon bantuannya...

    Terima kasih

    ReplyDelete
  7. Mantappppp coy... hehehehe... thx trik nya..

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz