Membuat Sidebar Dalam Kotak-Kotak Terpisah

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. Bingung? hehehehehe……. kacian dech loe, minum obat bingung dulu gih biar bingungnya hilang.

Dimanakan kode wiget itu berada? setiap template tentunya berbeda satu sama lain, sehingga trieck69 pun tidak bisa mematok kode itu harus bagaimana, namun sebagai contoh trieck69 ambil Template minima. Di dalam template minima, kode widgetnya adalah seperti ini :

sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor; 

  margin:0 0 1.5em; 

  padding:0 0 1.5em; 

}

Jadi untuk mengetahui di manakah kode widget itu? jawabnya yang ada kata-kata widget nya (bener ngga? hehehe..). 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 bisa lebih berexplorasi. Ok para sedulur semua, kita fokus satu satu dulu yaitu ke widget sidebar. Untuk memberikan kesan sidebar widget mempunyai kotak yang terpisah-pisah anda bisa membuat variasi kode seperti ini (contoh saja) :

 .sidebar .widget{

background:#fff; 

  border:1px dotted #6c6b6b; 

margin:0 0 1.5em; 

  padding:0.5em; 

}