Merubah Template 2 kolom Menjadi Tiga Kolom

Secara default Blogspot hanya menyediakan satu buah kolom sidebar dan satu buah kolom untuk postingan. Bagi anda 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 anda harus benar-benar teliti.

Berikut Cara-caranya:

1. Akses Blogger anda

2. Masuk kehalaman Dasboard

3. Klik Layout lalu pilih Edit HTML

4. Backup terlebih dahulu template anda dengan mengklikDownload 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 anda 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 anda 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:

<div id="'main-wrapper'">
<b:section class="'main'" id="'main" showaddelement="'no'">
<b:widget id="'Blog1'" locked="'true" title="'Blog" type="'Blog'/">
</b:widget>
</b:section></div>
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="Profile2" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive2" locked="false" title="blog Archive" type="BlogArchive2">
<b:widget id="followers2" locked="false" title="Followers" type="Followers">
</b:widget>
</b:widget></b:widget></b:section></div>

18. Kemudian dibawah nya anda letakkan script berikut ini:

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

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

19. Klik Save Template

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

Bila sidebar letaknya terlalu mepet dengan postingan anda bisa menambah padding atau space jarak antar kolom postingan dengan sidebar yang baru anda 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 anda menjadi 3 kolom yaitu 2 sidebar dengan 1 kolom postingan

Selamat mencoba, semoga berhasil.