Cara membuat 2 Sidebar di Bawah Sidebar Utama

Sidebar berguna untuk memasang berbagai atribut agar blog kelihatan dinamis.Bagi blogger profesionol ataupun master sangat membutuhkan banyak ruang untuk menempatkan macam-macam atribut.

Kalau kita lihat blog atau web para master,disitu banyak terpampang iklan yang bisa menarik perhatian pengunjung.

Sebagai newbie ( sebutan bagi pandatang baru ) kita tentu belum terlalu memerlukan banyak ruang,namun demikian tidak ada salahnya jika sudah memiliki stok ruang.Siapa tahu suatu saat nanti kita juga membutuhkan lebih banyak kolom untuk menempatkan berbagai atribut termasuk script iklan tentunya.

Dua sidebar ini tidak akan kelihatan jika belum diisi,jadi tidak akan mengganggu tampilan blog.

Bagi anda yang pingin menambah dua kolom di bawah sidebar utama,ikuti langkah-langkah berikut :

     1.Masuk Blogger.

     2.Klik Tata Letak.

     3.Klik submenu Edit HTML.

     4.Jangan lupa Download Lengkap Template untuk menjaga jika kita gagal.

     5.Cari kode :

#sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}

Ganti angka 220 dengan lebar yang lebih besar,sebab untuk dua kolom akan terlalu kecil.Misalkan saja kita ganti dengan 300,jadi masing-masing kolom mempunyai lebar 145 dan sisanya untuk jarak antar kolom.

Untuk float kita ganti dengan right,maksudnya kolom akan menempel di sebelah kiri body.Sehingga kode menjadi :

#sidebar-wrapper {
width: 300px;
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 */
}

     6.Tambahkan kode berikut setelah kode di atas.

#left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
      7.Pasang kode HTML,cari kode :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>

8.Sisipkan kode berikut di bawah <b:widget id= dan seterusnya....

     <b:section class='sidebar' id='left-col' preferred='yes'/>
     <b:section class='sidebar' id='right-col' preferred='yes'/> 

Sehingga menjadi :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>