Merubah Template 2 kolom Menjadi 3 Kolom

 

Pada umumnya Blogspot hanya menyediakan satu buah kolom sidebar dan satu kolom postingan. Bagi anda yang ingin mengubahnya jadi Template 3 kolom dapat melakukan penambahan skript CSS. Setiap template scriptnya tidak sama persis karena itu pada tahap ini anda harus benar-benar teliti, jika masih ragu Download Template anda dulu dan ikuti langkahnya dibawah ini,


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 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) width:660px; jadi 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. Untuk 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 width:220; jadi 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 letakan dibawahnya 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, 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 Simpan Template.

Untuk melihat perubahan yang dihasilkan klik Rancangan

Sekian dulu tutorial kali ini, selamat berexperimen dengan template anda, sebelum anda meninggalkan blog ini
saya harap anda sudi meninggalkan sedikit komentar anda..!