Cara Membuat Blog Menjadi 3 Kolom

Assalamu’ alaikum para pecinta blogger. Pada pertemuan kali ini saya akan menjelaskan tentang cara membuat blog menjadi 3 kolom. Yang dimaksud adalah sebuah blog terdiri dari 1 main wrapper (tempat postingan) dan 2 sidebar. Pingin kan tau caranya makanya ikutin tips-tips berikut ini :
1. Langkah pertama login ke blogger.com
2. Pilih Layout/Tata Letak ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan dalam pengeditan HTML

4. Jangan beri tanda centang pada kotak Expand Template Widget karena kodenya akan semakin banyak dan rumit
5. Kemudian cari kode seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;

6. Kemudian tambahkan kode seperti ini di bawahnya :

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

7. Sebelum menambah kode tersebut perbesar angka pada kode width: 660px pada bagian outer wrapper, contohnya menjadi width: 880px kalau masih belum jelas lihat contoh di bawah ini :

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

8. Maka jadinya akan seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 880px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

9. Langkah selanjutnya cari kode seperti ini !

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

10. Lalu tambahkan kode seperti ini di bawahnya :

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

11. Maka jadinya akan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

12. Jika menggunakan cara tersebut, maka sidebarnya berada di sebelah kanan semua
13. Tetapi jika ingin sidebarnya berada di kiri dan kanan maka tambahkan kode seperti ini :

#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Maka jadinya akan seperti ini :

>/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 880px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;

#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

14. Langkah selanjutnya cari kode seperti ini :

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
lt;/div>

15. Kemudian tambahkan kode seperti ini di atasnya :

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

16. Maka jadinya akan seperti ini :

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

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

17. Kalau sudah selesai tinggal klik simpan template !
18. Dan yang terakhir jangan lupa berterima kasih ke Kiwol yang cool ini dan Allah SWT, wassalamu’ alaikum wr. wb.