Menambah kolom elemen di bawah sidebar

Sebelumnya saya posting bagaimana cara menambah kolom elemen di atas footer. Nah kali ini bagai mana pula menambah kolom elemen di bawah sidebar. ini article sebenarnya untuk memperlengkap tutor sebelum nya. ada pepatah yang katakan kalau kerja itu yang selesai jangan setengah-tengah. jadi kalau kasih ilmu itu harus lah sempurna. sebagai contoh lihat gambar di bawah ini.

Untuk menambah elemen diatas kita sedikit menambah kan kode css ke dalam tamplate kita. untuk membuatnya ikuti langkah-langkah di bawah ini.

Log in dulu ke blogger Tata letak

Edit HTML

Backup template anda, klik Download tamplate lengkap

Kemudian kasih tanda centang di kotak kecil kanan atas

Cari kode

#sidebar-wrapper {width: 300px;float: $startSide;word-wrap: break-word; /* fix for long text breakingsidebar float in IE */overflow: hidden; /* fix for long non-text content breakingIE sidebar float */}

Ganti nilai width 300px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya width: 320px dan properti menjadi float: right; sehingga secara keseluruhan menjadi seperti ini :

#sidebar-wrapper {width: 320px;float: right;word-wrap: break-word; /* fix for long text breakingsidebar float in IE */overflow: hidden; /* fix for long non-text content breakingIE sidebar float */}

Kemudian tambah kan kode berkut di bawah kode diatas

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

Sekarang kita akan membuat id untuk sidebar left-col dan right-col tersebut. Cari kode ini:

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

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 secara keseluruhan menjadi seperti di bawah ini

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

Setelah itu simpan tamplate dan lihat hasilnya

Selamat mencoba.........