Jika anda butuh kolom sidebar lebih dari satu, sementara template yang anda gunakan saat ini hanya satu kolom, maka anda bisa menambahkannya sendiri. Caranya juga tidak sulit. Anda tinggal ikuti beberapa langkah dibawah ini.
Sebenarnya ini kelanjutan dari tutorial Cara Membuat Template Blog Sendiri dari Awal. Karena itu sebaiknya anda ikuti dulu tutorial Cara Membuat Sidebar Template dari Awal, sehingga anda bisa lebih paham alurnya secara mendasar. Karena jika anda sudah paham cara membuat sidebar, maka untuk menambahkan 2 kolom dibawahnya, akan lebih mudah. Karena letak semua kodenya berada pada rumpun yang sama, baik pada bagian elemen HTMLnya, maupun pada CSS pengaturan tampilannya.
Untuk membuat sidebar satu kolom pada tutorial sebelumnya, kode HTMLnya adalah seperti dibawah ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</div>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</div>
Maka untuk menambahkan 2 kolom dibawahnya, ganti semua kode diatas dengan kode dibawah ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'></b:section>
<b:section class='sidebar' id='sidebar-2' showaddelement='yes'></b:section>
<div class='clear'/>
</div>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'></b:section>
<b:section class='sidebar' id='sidebar-2' showaddelement='yes'></b:section>
<div class='clear'/>
</div>
Kemudian untuk kode CSS (pengaturan tampilan) untuk satu kolom sidebar sebelumnya adalah seperti ini:
#sidebar-wrapper{
float: right;
background:#f1f1f1;
width: 350px;
}
float: right;
background:#f1f1f1;
width: 350px;
}
Maka untuk melengkapi kode pengaturannya setelah ditambahkan 2 kolom, ganti semua kode CSS diatas dengan kode dibawah ini:
#sidebar-wrapper{
float: right;
background:#f1f1f1;
width: 350px;
}
#sidebar-1{
float: left;
background:#f1f1f1;
width: 150px;
}
#sidebar-2{
float: left;
background:#f60;
width: 150px;
}
float: right;
background:#f1f1f1;
width: 350px;
}
#sidebar-1{
float: left;
background:#f1f1f1;
width: 150px;
}
#sidebar-2{
float: left;
background:#f60;
width: 150px;
}
Jika semuanya sudah, silahkan Simpan Tema blog anda dan lihat perubahannya. Jika cara yang anda lakukan sudah benar, maka pada halaman Tata Letak dasbor blog anda, akan muncul 2 kotak elemen dari kedua kolom sidebar tersebut seperti ini:
