Cara Membuat Sidebar Kiri Dan Kanan

Langsung saja deh kita menuju pada judul di atas Cara Membuat Sidebar Kiri Dan Kanan.

Langkah pertama yang harus kita lakukan adalah :

• Login Blogger
• Pilih Rancangan
• Edit HTML, pastikan backup template kamu
• Beri tanda Centang pada Expand Widget Template

Setelah langkah diatas kita lalui, carilah kode berikut :

#sidebar-wrapper {
  width: 215px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  background-image:url(none);


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

Untuk lebih mudahnya, pencarian gunakanlah ctrl + F ketik  #sidebar-wrapper {

Setelah ketemu tambahkan kode berikut di bawah kode tersebut di atas

#sidebarbaru-wrapper {
width: 215px;
float: left;
padding:5px;
border:1px solid $bordercolor;
background-color:#transparent;
word-wrap: break-word;
overflow: hidden;
}

Beginilah kira-kira

#sidebar-wrapper {
  width: 215px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  background-image:url(none);

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

#sidebarbaru-wrapper {
width: 215px;
float: left;
padding:5px;
border:1px solid $bordercolor;
background-color:#transparent;
word-wrap: break-word;
overflow: hidden;
}

Sekarang kita menuju ke bagian bawah, carilah kode berikut :

<div id='main-wrapper'>

Tambahkan kode berikut tepat di atas kode tersebut

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Sehingga menjadi seperti ini

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

<div id='main-wrapper'>

Langkah terakhir kamu tinggal Simpan Template kamu dan lihat hasilnya.

Semoga Bermanfaat

Baca Juga :