Template 3 column

Setelah merperhatikan,menimbang,akhirnya saya memutuskan blog saya akhirnya berubah format dari 2 kolom menjadi 3 kolom (biar seperti blog-blog yang lain) heheheheheh,setelah googling sana-sini saya akhirnya memutuskan untuk mengikuti tutorial dari sini .sebetulnya banyak sumber yang lain seperti dari mas isnaini malah dikasih gratis langsung pake.tetapi karena pertimbangan supaya nggak banyak input-input data lagi saya cari yang langsung bisa mengedit dari html blog saya(kebetulan terakhir blog ini memakai versi minima),akhirnya bertemulah sayadengan blog yang memenuhi kriteria yang saya inginkan heheheheheh,untuk itu kredit dari tulisan ini saya tujukan untuk pemilik blog tips-for-new-blogger.semoga jadi amal beliau heheheheh

Sengaja saya tulis kembali tutorial ini agar saya ingat (maklum udah agak pelupa….sedikit)dan siapa tahu ada juga pembaca yang mau agar blognya jadi 3 kolom juga heheheh.Ini langkah-langkahnya……..siap …..maju jalan(lho kok…)

Sebelum anda melakukan perubahan jangan lupa untuk membackup template anda(jaga-jaga siapa tahu salah pencet).kita pergi ke dashboard -> Template -> Edit HTML. klick “Download Full Template” untuk menyimpan backup di computer kita.Terus centang bagian Expant widget templates
cari bagian seperti ini:

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 450px;
margin-left: 25px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

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

Untuk menambah sidebar satu lagi ,copy bagian yang tulisannya saya miringin dan paste setelah bagian tersebut, kemudian ganti namanya jadi newsidebar-wrapper.lalu kita mainkan ukuran semua wrapper tersebut.kalau saya punya 9000px untuk outer-wrapper, 450px untuk main-wrapper, and 2000px untuk sidebar-wrapper.terserah anda mau berapa anda bisa coba-coba terus(pake preview..kalau udah mantap baru di save).kalaupun salah anda masih pake template yang sudah anda simpan sebelum mengeditnya tadi kan(eh tadi sudah di save blom????)
sekarang tampilan hasilnya seperti di bawah ini:

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 450px;
margin-left: 25px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

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

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

Kemudian kita lanjutkan …kalau anda perokok anda boleh merokok dulu sambil ngopi ….bagi dong…..(becanda...lho)cari bagian Page structure tweak...Tambahkan width: 750px; saya tandai dengan huruf tebal

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
width: 750px;

selanjutnya yang harus kita tambahkan adalah section bodynya.kita cari bagian div id='main-wrapper gunakan Ctl+F biar lebih mudah

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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

setelah ketemu tambahkan diatas bagian itu dengan yang ada dibawah ini saya kasih cetak tebal

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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

Langkah terakhir yang harus kita lakukan adalah mengganti ukuran header-wrapper dan footer.Cari bagian “header-wrapper” dan “footer” seperti yang kita inginkan

#header-wrapper {
width:660px;

dan

#footer {
width:660px;

ganti ukuran seperti yang kita inginkan,seperti yang saya lakukan,saya ganti ukurannya menjadi 750 anda bisa memainkan sekehendak anda

#header-wrapper {
width:750px;

dan bagian

#footer {
width:750px;

selesai........wuih,sebelum anda "save" terlebih dulu anda preview dulu kalau hasilnya menurut anda sudah mantap bin puas boleh anda "save".cihuy....sekarang blog kita menjadi 3 kolom.sekali lagi kredit tulisan ini saya tujukan kepada pemilik blog tips-for-new-blooger.silahkan anda langsung ke beliau kalau lebih lengkap.....selamat mencoba