Membuat Template Blogspot menjadi 3 Columns

Memang agak sempit menaruh widget jika template yg anda gunakan hanya mempunyai 2 columns, itu juga pernah saya rasakan. Untungnya setelah saya tanya sana tanya sini, eh ketemu juga deh jawabannya..
Walaupun banyak free template yang menyediakan template dengan 3 columns, tapi ngga ada salahnya kan kalau kita mencoba dengan cara kita sendiri. lumyan kan buat nambah-nambah ilmu. Oc, ngga usah ngobrol panjang lebar lagi..

Masuk ke akun blogger Anda, pilih “Tata Letak” kemudian klik “Edit HTML” (pastikan bahasa yang anda pilih adalah bahasa Indonesia).

Untuk menghindari kesalahan saat proses hack code HTML, jangan lupa lakukan backup template (Download Template) ke hardisk PC Anda. Setelah selesai mem-backup template beri tanda centang pada “Expand Widget”.

Tahap pertama “MEMODIFIKASI UKURAN” :

Cari kode dibawah ini (tekan ctrl + F), lalu ubah ukurannya sesuai dengan yang telah direncanakan :

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */

Tambahkan kode berikut tepat dibawah kode tersebut sesuai dengan ukuran yang telah direncanakan :

#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */

Cari kode HTML seperti dibawah ini, lalu ubah ukurannya sesuai dengan yang telah direncanakan tadi :

#outer-wrapper {
width : 800px;
margin: 0 auto;
padding: 10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width : 400px;
margin-left: 20px
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}

Setelah itu lanjutkan proses peng-Edit-an kode HTML dengan mencari kode seperti ini:

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer,
with: 800px;
padding: 0px;
}
body# layout #sidebar-wrapper {
width: 400px;
margin-left: 20px
}
body#layout #sidebar-wrapper,
body#layout#newsidebar-wrapper {
width: 200px
}

Tahap kedua “MENAMBAHKAN SIDEBAR BARU” :
Cari dan tambahkan lagi tepat diatas kode ini

:

<div id='newsidebar-wrapper'>
<b: section class='sidebar' id='newsidebar- preferred='yes'>
<b: widget id='NewProfile' locked='false' tittle='Tentang Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='blog1' locked='true' tittle='Blog Posts' tipe='Blog'/>
</b:section>
</div>

Setelah langkah diatas selesai langkah diatas, simpan (SAVE) hasil proses pengeditan kode HTML tadi. Untuk melihat hasilnya tekan tombol “Pratinjau” atau mengatur Widget element template dengan mengatur kembali posisinya dengan mengklik “Tata Letak”.
Thanx 4 d visit my blog...