Cara Membuat Dua Sidebar Samping di Blog

Ada seorang pengunjung blog saya yang bertanya, gimana sih caranya membuat blog jadi ada 2 sidebar samping ? Caranya sih gampang-gampang susah, yang penting cuma berani nyoba. Sebelum mencoba langkah-langkah saya, saya ingatkan untuk menyimpan template blogmu terlebih dahulu. Hanya jaga-jaga jika terjadi kerusakan pada blogmu.
Pada dasarnya template blogger mempunyai sidebartop sama sidebarbottom, yang letaknya di atas dan bawah. Nah, sidebarbottom itulah yang saya ambil dan saya letakkan di sebelah sidebartop, bukan dibawah sidebartop lagi seperti sebelumnya.

Template HTML awal seperti ini :

#sidebar-wrap {
width:275px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
...
...
...
<div id='sidebar-wrap'>

<div id='sidebartop-wrap'>
<div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Text1' locked='false' title='Takut lupa dgn alamat blog ini ?' type='Text'/>
<b:widget id='HTML1' locked='false' title='Find Everything In Here' type='HTML'/>
<b:widget id='HTML4' locked='false' title='My Article' type='HTML'/>
</b:section>
</div> /* penutup div sidebartop-wrap */
</div> /* penutup div sidebartop-wrap2 */

<div id='sidebarbottom-wrap1'>
<div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='false' title='Iklan... iklan...' type='HTML'/>
<b:widget id='HTML3' locked='false' title='E Ce Tra' type='HTML'/>
</b:section>
</div> /* penutup div sidebarbottom-wrap1 */
</div> /* penutup div sidebarbottom-wrap2 */

</div> /* penutup div sidebar-wrap */

Template blog saya, saya ubah menjadi seperti ini :

#sidebar-wrap {
width:275px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

#sidebar2-wrap {
width:275px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

<div id='sidebar-wrap'>
<div id='sidebartop-wrap'>
<div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Text1' locked='false' title='Takut lupa dgn alamat blog ini ?' type='Text'/>
<b:widget id='HTML1' locked='false' title='Find Everything In Here' type='HTML'/>
<b:widget id='HTML4' locked='false' title='My Article' type='HTML'/>
</b:section>
</div> /* penutup div sidebartop-wrap */
</div> /* penutup div sidebartop-wrap2 */
</div> /* penutup div sidebar-wrap */

<div id='sidebar2-wrap'>
<div id='sidebarbottom-wrap1'>
<div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='false' title='Iklan... iklan...' type='HTML'/>
<b:widget id='HTML3' locked='false' title='E Ce Tra' type='HTML'/>
</b:section>
</div> /* penutup div sidebarbottom-wrap1 */
</div> /* penutup div sidebarbottom-wrap2 */
</div> /* penutup div sidebar2-wrap */

Yang saya lakukan hanya membuat sebuah div baru dengan nama "sidebar2-wrap", dengan spesifikasi yang sama dengan "sidebar-wrap", hanya mengganti float menjadi right atau left. Float berguna untuk mengatur letak div tersebut.
Lalu div "sidebarbottom-wrap1" yang semula ada didalam div "sidebar-wrap", saya keluarkan dan saya pindah ke dalam div "sidebar2-wrap" yang baru saja saya buat.
See... jadi deh, gampangkan.
Tapi jangan lupa untuk mengatur width masing-masing div ya, agar lebarnya tidak berantakan. Untuk belajar mengatur lebar div, bisa dilihat di sini. Untuk mempelajari tentang div itu sendiri, bisa klik disini.