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 breaking
  sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking
  IE 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 breaking
  sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking
  IE 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