Memodifikasi template dua kolom Menjadi tiga kolom

Beberapa waktu yang lalu saat Blog Sekedar Komentar ini baru saja dibuka (kayak toko aja, dibuka), blog ini memilih template yang sederhana ini, dengan back ground warna putih dan header berwarna orange, bukan tanpa alasan tapi memang beralasan juga alias gak bisa buat template yang macem-macem yang pebuh warna-warni disana sini, sudah mencoba untuk mencari template yang keren di beberapa penyedia template gratis tapi tetap saja tidak menemukan jodoh yang memikat hati ini. Akhirnya karena desperate, Tukang komen mengambil salah satu template yang disediakan blogger ini.

Namun pada sebuah komentar pada postingan yang Tom Hanks ada sebuah pertanyaan dari salah seorang teman kita:

Quinie: "................................... btw, templatenya simple, template bawaan blogger, tapi kok 3 kolom?!......
gimana caranya bisa dijadiin 3 kolom gini? ajarin dong

Sebenarnya saya bukan ahli yang kayak gini-ginian (buat dan modif template) sebenernya ada yang lebih ahli seperti Cak Rio misalnya, tapi tak apalah, akan saya coba untuk sedikit membagi pengetahuan saya yang masih minim tentang template ini.

OK, seperti template yang saya pakai, saya akan menjadikan template sand dollar ini sebagai bahan percobaan untuk dimodifikasi menjadi tiga kolom. Pertama-tama masuk ke Customize, trus pilih edit HTML, maka akan keluar kode HTML dari template yang anda pakai.

Langkah selanjutnya cari kode seperti ini:

@media all {
div#main {
float:$startSide;
width:60%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 20%;
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 */
}
}

Jika ingin letak postingan disebelah kiri, ganti float pada div#main (berwarna biru) menjadi $endside.



Lalu copy dan paste dibawahnya bagian div#sidebar, dan ganti namanya menjadi div#new_sidebar sehingga menjadi seperti dibawah ini:

div#new_sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 20%;
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 */
}
}

* Width(berwarna merah) adalah lebar kolom yang dikehendaki, dan hasil penjumlahan ketiganya seharusnya 100%.

Setelah itu scroll jauh kebawah pada kode HTML template, dan temukan kode sebagai berikut:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Setelah itu sekali lagi copy dan pastekan dibawahnya, dan ganti div id='sidebar-wrapper' menjadi div id='new_sidebar-wrapper' sehingga menjadi seperti dibawah:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

<div id='new_sidebar-wrapper'>
<b:section class='sidebar' id='new_sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Lalu untuk pembagian letak widgetnya, harus dibagi dari ketiga kode yang saya beri warna biru, ungu dan orange itu, ada yang diletakkan di "sidebar-wrapper atau di new_sidebar-wrapper. Jangan sampai di kedua bagian (sidebar-wrapper dan new_sidebar-wrapper) ada widget yang sama, karena akan ditolak.
Demikian modifikasi yang Tukang komen lakukan dengan template blogger 2 kolom menjadi 3 kolom, semoga mudah dipahami dan bermanfaat.