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 */
}
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!!!
