Membuat Blog 3 Kolom di Blogspot

Membuat Blog 3 kolom di blog khusunya di blogger / blogspot,
Dalam Membuat Blog 3 kolom / sidebar sebenarnya sudah tidak asing lagi buat blogger yang sudah mahir dan artikel ini mungkin tidak ada apa-apanya tapi buat blogger yang newbie / pemula seperti saya ini mungkin perlu untuk mengetahuinya.
Bagi anda yang menginginkan Membuat blog 3 kolom tak perlu khawatir, karena template anda yang sekarang bisa anda modifikasi sendiri tanpa harus mengganti-ganti template. Karena penggantian template yang terlalu sering juga bisa membingungkan pengunjung tetap anda (fans) dan juga robot search engine.

Posting kali ini sebenarnya adalah request dari teman blogger beberapa waktu yang lalu yang menginginkan membuat blog 3 kolom. Beberapa template blog mungkin berbeda penamaan css templatenya, namun pada tutorial ini menggunakan template pada umumnya blogger gunakan. Tanpa perlu berbasa-basi, berikut ini cara memodifikasi atau membuat blog di blogspot 3 kolom :

Cara Membuat Blog 3 kolom di Blogspot :

1. Login ke blogger. Masuk ke design, lalu edit html. Jangan lupa backup terlebih dahulu template anda. Kemudian berikan centang pada expand widget template.

2. Tambahkan kode berikut sebelum kode ]]></b:skin>

#main-wrapper {
width: 433px;
padding:15px;
float: right;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}
#sidebar-wrapper {
width: 225px;
float: right;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}
#sidebar-wrapper2 {
width: 225px;
float: left;
display: inline;
word-wrap: break-word;
overflow: hidden;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #CCCCCC;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 5px;
}

Jika nama id pada template anda adalah sama, silahkan anda tambahkan saja kode css dibawahnya ke dalam template yang sudah anda punya, pada id yang sama tersebut.

3. Cari kode <div id='content-wrapper'> kemudian letakkan kode <div id='main-wrapper'> sebelum kode akhir div content-wrapper.

4. Setelah kode akhir div dari main-wrapper, copykan kode berikut ini :

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar10' preferred='yes'>
<b:widget id='HTML100' locked='false' title='TITLE WIDGET Fans' type='HTML'>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML101' locked='false' title='TITLE WIDGET Fans' type='HTML'>
</b:section>
</div>

Sehingga susunan secara garis besar adalah seperti ini :

<div id='content-wrapper'>

<div id='main-wrapper'>
BLOG POST
</div>

<div id='sidebar-wrapper2'>
SIDEBAR KIRI
</div>

<div id='sidebar-wrapper'>
SIDEBAR KIRI
</div>

</div>

5. Selesai. Silahkan anda coba. Untuk kode yang berwarna merah, bisa anda sesuaikan sendiri dengan template anda, seperti warna, dan ukuran lebar template anda.