Cara menambah kolom elemen di bawah dua sidebar

Hai semuanya... apa kabar??? smoga baik dan salam super. Menambah kolom elemen dibawah dua sidebar itu topik utama pembahasan kita hari ini. Posting ini hanya untuk melengkapi design tamplate sebelumnya. Nah agar tidak membingungkan terlebih dahulu anda lihat contoh gambar berikut.

Dari contoh gambar di samping pasti udah mengerti kan bentuk kolom elemen di bawah dua sidebar. Bagi yang ingin menerapkan atau ingin mencoba-coba silahkan ikuti langkah-langkah di bawah ini.

• Seperti biasa Log in dulu ke blogger
• Tata letak
• Edit HTML
• Backup template anda, klik Download Template Lengkap
• Beri tanda centang pada kotak kecil kanan atas
• Sekarang cari kode ini

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

• Silahkan diganti dulu nilai width 300px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 320px dan properti menjadi float: right; Jadinya 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 */
  }

• Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna biru saja

  #left-col {
  width:150px;
  float:left;
  word-wrap:break-word;
  overflow:hidden;
  }
  #right-col {
  width:150px;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  }
  #bottom-col {
  width:320px;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  }
• sehingga kode nya akan menjadi begini

  #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 */
  }
  #left-col {
  width:150px;
  float:left;
  word-wrap:break-word;
  overflow:hidden;
  }
  #right-col {
  width:150px;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  }
  #bottom-col {
  width:320px;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  }
• Sekarang membuat id untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode 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>

• Masukkan kode berikut dibawah kode tadi

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

• Sehingga secara keseluruhan berbentuk seperti 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>
  <b:section class='sidebar' id='bottom-col' preferred='yes'/>

• Kemudian simpan tamplate anda dan lihat hasilnya.

Semua Ada Di Anen Copas

#jaya saputra