Cara Membuat Layout Sidebar Atas dan Bawah

Seperti biasa saya berkelana dari satu blog ke blog lainnya. Nah, ketika saya berkelana, saya menemukan banyak blog dengan banyak variasi template. Nah, salah satunya template dengan sidebar atas dan sidebar bawah.



Yang dimaksud sidebar atas, adalah sidebar, yang dibawah bagian sidebar tersebut ada sidebar yang terbagi dua. Setelah bagian sidebar yang terbagi dua itu, lalu ada lagi sidebar yang seolah-olah menyambung lagi dua bagian yang terpisah. Apabila dengan deskripsi tadi masih kurang jelas, mungkin gambar ini akan lebih memperjelas.

Sudah jelas kan? Ini dia cara-cara membuat template dengan sidebar atas dan bawah. Sebelumnya anda harus membuat blog baru dengan template Minima. Sudah? Lakukan langkah-langkah berikut.
1. Login ke Blogger lalu klik Tata Letak > Edit HTML.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 820px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
#sidebar-wrapper {
width: 360px;
float: right;
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 */
padding-left:10px;
}
#sidebaratas {
width: 360px;
clear:both;
word-wrap: break-word;
overflow: hidden;
padding-bottom:10px;
}
#sidebarkiri {
width: 175px;
float:left;
word-wrap: break-word;
overflow: hidden;
padding-right:10px;
}
#sidebarkanan {
width: 175px;
float:right;
word-wrap: break-word;
overflow: hidden;
}
#sidebarbawah {
width: 360px;
clear:both;
word-wrap: break-word;
overflow: hidden;
padding-top:10px;
}
#footer {
width:820px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Cari kode yang mirip dengan kode berikut ini.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
Lalu hapus dan ganti dengan kode berikut ini.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebaratas' preferred='yes'/>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
<b:section class='sidebar' id='sidebarkanan' preffered='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
<b:section class='sidebar' id='sidebarbawah' preferred='yes'/>
</div>
Terakhir, klik Simpan Template.
Sekarang coba lihat ke Elemen Halaman. Ada sidebar atas dan bawah kan?
Hormat Saya
NB: Jangan lupa ganti ukuran outer-wrapper  dan footer