MEMBUAT KOLOM DI BAWAH DUA SIDEBAR

Melengkapi panduan merubah template pada bagian 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 Blogger dengan ID anda.
2.Klik Tata Letak.
3.Klik submenu Edit HTML.
4.Download Lengkap Template untuk jaga-jaga.
5.Karena sebelumnya kita sudah pernah membuat dua kolom di bawah sidebar utama,maka langsung saja cari kode seperti ini :

#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; }

Sehingga kode akan jadi :

#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; } #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.

Klik Elemen Laman untuk melihat perubahan yang terjadi !
Isi kotak komenternya yo mas.....!!!