Masih sekitar utak-atik template Blogspot , kali ini tentang
Membuat Sidebar Dua Kolom atau membagi sidebar menjadi 2 kolom :
Caranya :
1.Masuk / login ke
Dashboard , pilih Layout --> Edit HTML
2.Download Full
Template, ini penting sebagai backup, buat jaga-jaga jika terjadi kesalahan
3.Kemudian cari
kode ]]></b:skin>
4.Copy kode
dibawah ini kemudian simpan tepat di
atas kode ]]></b:skin> tadi.
#lsidebar-wrapper {
float: left;
margin:0 10px
0 5px;
padding:0;
width:150px;
display:inline;
}
.lsidebar {
line-height:
1.5em;
}
.lsidebar
.widget {
background:
#FFFFFF;
float:left;
width: 140px;
margin: 0 0
10px 0;
padding: 10px;
border:1px
solid #f1f1f1;
}
#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}
.rsidebar {
line-height:
1.5em;
}
.rsidebar
.widget {
background:
#FFFFFF;
float:right;
width: 130px;
margin: 0 0
10px 0;
padding: 10px;
border:1px
solid #f1f1f1;
}
Atau bisa juga disimpan setelah kode
dibawah ini, silahkan pilih anda suka yg
mana :
/*- Sidebar
-*/
#sidebar {
float:
left;
width:
320px;
margin: 6px
0px 5px 0px;
padding:0px;
line-height:
18px;
display:
inline;
}
5.Setelah langkah2
diatas, dilanjut dengan mencari kode seperti di bawah atau yang agak mirip :
<div
id='sidebar-wrapper'>
<b:section
class='sidebar' id='sidebar' preferred='yes'>
<b:widget
id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
</div>
6.Setelah ketemu
hapus dulu kode </div> nya, lalu copy kode
berikut dan letakkan pas di bawahnya.
<div
id='lsidebar-wrapper'>
<b:section
class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div
id='rsidebar-wrapper'>
<b:section
class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
</div>
Jadi kode tersebut
akan tampak seperti di bawah
<div
id='sidebar-wrapper'>
<b:section
class='sidebar' id='sidebar' preferred='yes'>
<b:widget
id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
<div
id='lsidebar-wrapper'>
<b:section
class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div
id='rsidebar-wrapper'>
<b:section
class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
</div>
7.Save Template
Catatan :
Pada point 6,
harus menghapus kode </div> ( sebetulnya kode ini dipindahkan ke paling
bawah di point 6, lihat aja kodenya ada 2), ini dimaksudkan agar sidebar yang
ditambahkan akan tetap berada ditempatnya, soalnya kalau gak gini, jika postingan kita lebih pendek dari
sidebar, kadang2 sidebar baru itu suka
berada di bawah posting.
Untuk menyesuaikan
lebar sidebar baru, lihat sidebar utamanya. Misalnya sidebar utama lebarnya 300
px, maka lebar sidebar 1 dan 2 bisa sekitar 145, sehingga masih ada sisa 10 px
untuk batas atau margin.
Selamat mencoba,semoga sukses.
