Menambah Sidebar Sebelah Kiri

Menambah Sidebar Sebelah Kiri-Sebagian ada blogger yang ingin membuat blog mempunyai sidebar sebelah kiri dengan mengedit template sendiri. Mengedit template sendiri memang mengasikan. Kalau anda sudah sedikit mengerti dengan edit HTML tentu apa yang akan saya tulis dibawah ini mudah untuk dipahami.
Pada artikel yang lalu telah berhasil menambah sidebar di sebelah kanan kalau mau melihat silakan, agar lebih mudah memahami tutorial ini. Sedebar sebelah kiri dapat digunakan untuk menempatkan widget sesuka anda seperti label atau widget lainnya.

Cara Menambah Sidebar di Sebelah Kiri

Membuat sidebar sebelah kiri ini lebih tepatnya menambah elemen kiri, cara sangat mudah.

Masuk Dasbor Blogger

1. Pergilah ke dasbor blogger
2. Klik Rancangan, terus klik Edit HTML
3. Backup lah dulu template anda

Kode CSS

4. Cari kode CSS seperti ini.
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; 
  overflow: hidden;
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }

5. Hapus dan ganti dengan kode ini


#outer-wrapper {
  width: 910px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;
  }

#sidebar-wrapper {
  width: 200px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }

#sidebarkiri-wrapper {
  width:260px;
  float:left;
  word-wrap:break-word;
  overflow:hidden;
  }

Halaman Body

6. Cari kode seperti ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


7. Tambahkan kode ini diaatasnya
 

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

</b:section>
</div>

Menjadi seperti ini

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

</b:section>
</div>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

<div id='sidebar-wrapper'>

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

</div>


8. Save
9. Selesai


Untuk melihatnya apakah sudah berhasil menambahkan sidebar di sebelah kiri, pergilah ke Rancangan lihat pada elemen laman. Kalau disana sudah ada elemen sidebar di sebelah kiri berarti anda sudah berhasil, kalau belum ada ya diulangi lagi dengan teliti. Semoga sukses