Cara mengubah Template Blog menjadi Tiga Kolom

Secara default Blogspot hanya menyediakan satu buah kolom sidebar dan satu buah kolom untuk postingan. Bagi sobat yang ingin menambah kolom pada template menjadi 3 bagian dapat melakukan penambahan skrip CSS. Setiap template script nya tidak sama persis karena itu pada tahap ini sobat harus benar-benar teliti.

Berikut Cara-caranya:

1. Akses Blogger sobat

2. Masuk kehalaman Dasboard

3. Klik Layout lalu pilih Edit HTML

4. Backup terlebih dahulu template sobat dengan mengklik Download Template Lengkap

5. Sesudah itu pada Edit HTML cari script yang mirip dengan script berikut ini:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


6. Sekarang ubah wrapper (bagian luar) yang M.A beri warna merah menjadi width:950px:

7. Klik Save Template

9. Sekarang akses blogspot sobat dan lihat hasilnya. Kini pada bagian wrapper terdapat space kosong.

10. Sekarang masuk kembali ke menu Edit HTML. Sekarang kita akan menggubah ukuran sidebar, Carilah script berikut ini:
#sidebar-wrapper {
width: 220px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}


11. Ubah script berwarna merah diatas menjadi width:250px;

12. Klik Save Template

13. Akses Blogspot sobat dan perhatikan pada sidebar akan memiliki lebar yang lebih dibandingkan sebelumnya.

14. Masuk kembali ke menu Edit HTML dan cari script berikut ini:
#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

15. Copy script CSS diatas, lalu tempatkan dibawah nya dan ubah menjadi seperti di bawah ini:
#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}


Sehingga hasilnya seperti dibawah ini
#sidebar-wrapper {
width: 250px;
float: $enSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}

#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}


16. Klik Save Template

17. Kemudian cari script berikut ini:

18. Kemudian dibawah nya sobat letakkan script berikut ini:

Script diatas digunakan untuk memanggil second-sidebar-wrapper yang sudah dibuat script CSS nya.

19. Klik Save Template

Sekarang coba sobat masuk kehalaman Page Element. Pada Page Element terdapat sidebar yang baru saja sobat buat dan sobat bisa menmbahkan gadget baru pada sidebar tersebut.

Bila sidebar letaknya terlalu mepet dengan postingan sobat bisa menambah padding atau space jarak antar kolom postingan dengan sidebar yang baru sobat buat tadi. Caranya cari script berikut ini:
#second-sidebar-wrapper {
width: 250px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}


dan tambahkan script padding-left:10px; pada script diatas sehingga menjadi seperti dibawah ini:
#second-sidebar-wrapper {
width: 250px;
padding-left:10px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/
}


Lalu klik Save Template.

Selamat.... sekarang template sobat menjadi 3 kolom yaitu 2 sidebar dengan 1 kolom postingan

Selamat mencoba, semoga berhasil....