Cara Membuat Kolom di Bawah 2 Sidebar

Pada postingan kali ini akan membahas cara menambah kolom di bawah dua kolom sidebar.

Manfaat kolom bawah dua sidebar sama dengan kolomyang lain,jadi tidak usah kita bahas lagi.Yang penting kita jadi lebih banyak memiliki stok kolom.

Sebagai ilustrasi .coba lihat gambar di bawah ini :

Bottom sidebar  ( kolom di bawah dua sidebar ) inilah yang akan kita buat  pada kali ini.
Caranya sebagai berikut :

1.Masuk Blog
2.Klik Tata Letak.
3.Klik Edit HTML.
4.Download Lengkap Template untuk jaga-jaga.
5.Cari kode seperti dibawah untuk setiap template berbeda beda :

#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 */

#left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

6.Tambahkan kode berikut di bawah kode tadi :

#bottom-col {

width:145px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

7.Sekarang kita pasang  HTML nya,cari kode seperti dibawah :

<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>

8.Letakkan kode berikut ini  di atas </div> :

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

Sehingga kode 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'/>

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

</div>

9.Simpan Perubahan. lihat hasilnya:

Klik Elemen Laman untuk melihat perubahan yang terjadi !
Info:  http://www.prapatankertek.co.cc/