Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO

Tutorial berikut saya tujukan khusus bagi yang menggunakan template yang sama dengan yang saya pakai yaitu Thesis SEO Blogger Template karya dari Blog Juragan. Langsung saja, untuk membuat 3 kolom di bawah header, silakan simak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Bila nanti terjadi kesalahan dalam pengeditan kita sudah mempunyai backupnya sehingga dengan mudah mengembalikan template seperti semula.

4. Cari kode ]]></b:skin>. Gunakan fitur pencarian pada browser agar cepat menemukannya.

5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#box-main-container {
clear:both;
border-bottom:3px double #e6e4e3;
}
.box-column {
padding:0px 10px 10px 10px;
}

Catatan: Jika ketiga kolom tidak diberi "Judul", tambahkan kode margin-top:14px; di bawah kode border-bottom:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='main-wrapper'>.

7. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>

<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='box2' style='width: 34%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>

<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

8. Klik SIMPAN TEMPLATE.

9. Selesai.

Setelah ditambahkan widget, maka hasilnya akan tampak seperti gambar di bawah ini.

3 kolom di bawah header.