Friday 12 August 2011

Menambah side bar sebelah kiri

Rabu, 13 Juli 2011

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

0 comments:

Post a Comment

Untung pantas

LinkWithin