Merubah Template Blogger 2 Kolom Menjadi 3 Kolom

Jika template blog anda masih dua kolom seperti punya Blog Rudy Hartono ini, sepertinya terlihat membosankan bukan (kurang menarik dan kurang variasi). Mungkin anda sudah bosan dengan tampilan template blog anda yang masih 2 kolom dan rasanya ingin menambah lagi untuk 1 kolom biar terlihat bagus, sehingga menjadi 3 kolom. Saya akan share Cara Merubah Template Blogger 2 Kolom Menjadi 3 Kolom. Dengan ditambahkan 1 kolom lagi tentunya akan berguna untuk meletakkan beberapa widget yang mungkin anda butuhkan dan tampilan blog anda akan semakin menarik karena ditambahnya beberapa widget, misalnya menambah ruang iklan atau label/kategori dan lain-lain.

Pada dasarnya anda hanya berpatokan pada kode #outer-wrapper, #main-wrapper, dan #sidebar-wrapper untuk menambah kolom blog.

Misalnya pada template yang sekarang ini saya pakai dengan template blog 2 kolom akan dirubah menjadi 3 kolom, dimana lebar/width #outer-wrapper = 990px, #main-wrapper = 655px, #sidebar-wrapper = 310px

Nah disini saya akan menambahkan 1 kolom sidebar baru (#sidebar-wrapper2) dengan ukuran 150px, maka harus merubah ukurannya dengan rumus :

#outer-wrapper = #main-wrapper + #sidebar-wrapper + #sidebar-wrapper2 + margin left

Supaya sidebar tidak gabung dengan main elemen, maka harus diberi jarak antara keduanya 10px, sehingga ukuran #outer-wrapper = 1015 px

Keterangan :
1. #outer-wrapper adalah halaman blog
2. #main-wrapper adalah lebar dari post blog atau lebar dari tempat postingan blog
3. #sidebar-wrapper adalah lebar dari sidebar

Cara Membuat Template Blogger 2 Kolom Menjadi 3 Kolom

1. Login ke Blogger
2. Pilih Template
3. Pilih Edit HTML => Lanjutkan
4. Backup dulu template anda untuk jaga-jaga kalau terjadi kesalahan masih punya cadangan template
5. Centang kotak kecil dekat Expand Template Widget
6. Gunakan Ctrl+F untuk mencari kode yang mirip seperti ini :

Perhatikan kode CSS di bawah ini (contoh saja) :

#outer-wrapper {background:#fff;-moz-box-shadow:0 0 13px #000;border:9px solid #fff;width:990px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:0 10px 0 0}

#main-wrapper {padding-left:10px;width:655px;float:left;word-wrap:break-word;overflow:hidden}

#sidebar-wrapper {width:310px;float:right;word-wrap:break-word;overflow:hidden}

Anda lihat kode warna merah diatas :

1. Silahkan ubah #outer-wrapper width: 990px menjadi 1015px
2. Silahkan ubah #main-wrapper width: 655px menjadi 525px
3. Pada #sidebar-wrapper, tambahkan padding-left:10px
4. Tambahkan kode #sidebar-wrapper2{width: 150px;float: left;padding-left:10px;word-wrap: break-word;overflow: hidden;}

Sehingga penerapannya menjadi seperti ini :

#outer-wrapper {background:#fff;-moz-box-shadow:0 0 13px #000;border:9px solid #fff;width:1015px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:0 10px 0 0}

#main-wrapper {padding-left:10px;width:525px;float:left;word-wrap:break-word;overflow:hidden}

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

#sidebar-wrapper2 {width: 150px;float: left;padding-left:10px;word-wrap: break-word;overflow: hidden;}

Simpan dulu template anda.

Selanjutnya hilangkan tanda ceklis pada kotak kecil dekat Expand Template Widget dan cari kode berikut

<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>

Selanjutnya copy kode berikut dan letakkan dibawahnya

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

Sehingga penerapannya seperti ini :

<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-wrapper2'>
<b:section class='sidebar' id='second-sidebar' preferred='yes'/>
</div>

Selesai, Simpan Template

Ini adalah awal dari template blog 2 kolom yang akan dimodifikasi menjadi template 3 kolom

Hasilnya setelah template blog 2 kolom dirubah menjadi 3 kolom akan seperti ini

Nah begitulah cara merubah template blog 2 kolom menjadi 3 kolom, selamat mencoba.