Belajar membuat template sendiri (5)

Kalau sobat sudah membaca bagian 1, bagian 2, bagian 3, bagian 4 dan sudah memahaminya, pasti bagian ini menjadi bagian yang menyenangkan, yaitu bagian membuat kolom baru. Pada dasarnya banyak cara atau teknik untuk membuat kolom baru ini, saya kasih salah satu contoh yang biasa saya gunakan dalam membuat template kolom baru.

Hal pertama yang dilakukan adalah melihat ukuran atau width dari template yang sobat akan buat, jika ingin menambahkan kolom baru maka ukuran widhtnya di sesuaikan., biasanya ukuran outer-wraper yang di rubah kemudian main-wrapper, dan sidebar-wrapper, serta footer-wrapper. Saya kasih contoh dengan menggunakan code template minima :


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

#main-wrapper {
width: 410px;
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 pada code tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Tampilan layout :

 

 Nah, sekarang kita ingin membuat kolom baru sidebar jadi 2 kolom di bawah kolom sidebar utama, atau lihat contohnya seperti ini :

  

 Yang perlu di lakukan adalah merubah width outer-wrapper, main-wrapper, dan biasanya untuk width header-wrapper serta footer-wrapper mengikuti ukuran width outer wrapper, kalau sobat sudah paham di bagian 3, dan bagian 4 tentu sangat mudah membuat layout seperti contoh gambar di atas. Jika sobat sudah merubah outer-wrappernya dengan yang di kehendaki, tinggal membagi sisanya untuk main-wrapper dan sidebar-wrapper saya kasih contoh dengan mengubah outer-wrapper : 920px, main-wrapper: 500px, dan sidebar-wraaper: 400px, nah sekarang bagaimana memunculkan 2 kolom sidebar di bawah sidebar utama?

Konsep dasar bagi sobat yang serius ingin belajar membuat template sendiri yatu sobat akan banyak mengubah kode di section 2 ( bagian CSS) dan section 3 (bagian HTML), kalau sobat sudah mengubah ukuran-ukuran di atas, tinggal menambahkan kode di bawah ini di section 2 :

#left-sidebar-wrapper {
  width: 180px;
  float: left;
  text-align: justified;
  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 */
}
#right-sidebar-wrapper {
  width: 180px;
  float: right;
  text-align: justified;
  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 */
}

Kode di atas untuk membentuk container baru yang namanya left-sidebar-wrapper dan right-sidebar-wrapper, nah sekarang kita ke bagian section 3 yaitu untuk memunculkan container baru ini di browser harus perlu di tulis di section 3 yaitu di bagian  <div id='sidebar-wrapper'> perhatikan tag penutupnya dan section classnya atau simple kodenya adalah seperti ini :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>


Masukkan kode ini di dalam container sidebar :


<div id='left-sidebar-wrapper'>
      <b:section class='sidebar' id='leftsidebar'>
</b:section>
    </div>
<div id='right-sidebar-wrapper'>
      <b:section class='sidebar' id='rightsidebar'>
</b:section>
    </div>


Sehingga kodenya akan seperti ini jika di masukkan ke dalam container sidebar :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
<div id='left-sidebar-wrapper'>
      <b:section class='sidebar' id='leftsidebar'>
</b:section>
    </div>
<div id='right-sidebar-wrapper'>
      <b:section class='sidebar' id='rightsidebar'>
</b:section>
    </div>
</div>


Perhatikan masing section classnya semuanya sidebar, yang berarti tamplilan maupun widget yang di dalam container baru tersebut mengkuti aturan class sidebar yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .left-sidebar {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='left-sidebar' id='leftsidebar'> 

Kalau sobat pahami tutorial ini dari bagian 1 sampai 4 tentunya bagian ini merupakan bagian yang tidak membingungkan.  Semoga ilmu ini bermanfaat buat sobat blogger yang ingin merancang template sendiri. Ok sobat  selamat mengikuti dan pahami dengan seksama, jangan terburu-buru membacanya. Semoga berhasil!!!