Menambah Kolom Sidebar Pada Template - Minima Today #4

Edisi minima today ke 4, kita membahas mengenai penambahan kolom sidebar pada Minima. Penambahan kolom sidebar ini, harus memperhatikan soal lebar yang tersedia. Pada keadaan standart lebar yang tersedia dibagi untuk postingan dan sidebar bawaan, sekarang kita akan atur ulang pembagian, agar muat untuk postingan, sideabr bawaan dan satu sidebar lagi yang akan ditambahkan (Sebaiknya Anda memahami dulu, Kaitan Outer Wrapper dengan Pelebaran Postingan atau Sidebar).

Sekarang kita akan mulai memodifikasi template kita. Misalkan lebar template Anda kecil, sebaiknya Anda lebarkan dahulu agar area sidebar tidak terlalu sempit. Seperti biasa saya gunakan contoh Minima Template yang kali ini sudah saya lebarkan.

Beberapa css penting:

#outer-wrapper {
  width: 960px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 710px;
  float: $startSide;
  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 */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 */
}

Dapat dilihat, lebar outer-wrapper adalah 960px. Dibagi untuk lebar main-wrapper sebesar 710 px dan sidebar-wrapper sebesar 220px. Dengan pembagian ini area outer wrapper masih sisa 30 px yakni (960 - (710 + 220) yang digunakan untuk pengaturan jarak. Untuk menambahakan sidebar baru, maka kita buat css baru bernama midsidebar-wrapper.

#midsidebar-wrapper {
  width: 220px;
  float: left;
  margin-right: 10px;
}

letakkan kode tersebut di atas #sidebar-wrapper {
Sekarang ada elemen baru berlebar 220px (width: 220px;) ditambah pengaturan jarak 10 px (margin-right: 10px;). Berarti ktia menambah 230px ruang baru. Untuk itu kita harus menyesuaikan perbandingan agar sidebar baru bisa masuk outer-wrapper. Silahkan kurangi lebar main-wrapper Anda 230 px sehingga menjadi 480px (710 - 230 = 480), kode main-wrapper yang tadi disebutkan di atas menjadi:
#main-wrapper {
  width: 480px;
  float: $startSide;
  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 */
  }


ditulis berurutan semuanya kini menjadi:
#outer-wrapper {
  width: 960px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 480px;
  float: $startSide;
  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 */
  }
#midsidebar-wrapper {
  width: 220px;
  float: left;
  margin-right: 10px;
}
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 */
}

Silahkan simpan template Anda terlebih dahulu. Jika sudah sekarang ktia akan menambah elemen HTML agar sidebar muncul di template Anda. Jangan lupa centang expand template widget. Tambahkan kode berwarna biru berikut ini di atas <div id='sidebar-wrapper'>
<div id='midsidebar-wrapper'>
        <b:section class='sidebar' id='midsidebar' preferred='yes'></b:section>
 </div>

Lalu simpan Template. Silahkan Beralih ke Elemen Halaman dan Anda akan mendapatkan kolom sidebar baru yang bisa Anda tambahkan gadget. Sekian minima today, semoga bermanfaat....