Menambah Sidebar Kanan Jadi 3 Kolom

Menambah Sidebar-Template bawaan blogger umumnya dua kolom, sebagian ada yang ingin menambah sidebar baik di sebelah kanan atau kiri. Oleh karena itu saya ingin membantu anda yang sedang membuat blog agar lebih mudah. Penambahan sidebar tidak harus dilakukan tetap disesuikan dengan kebutuhan blog.
Kebutuhan sidebar masing-masing blog berbeda. Sidebar erat kaitannya dengan penambahan widget yang ingin di pasang. Usahakan widget yang dipasang yang dibutukan saja, kalau bingung widget yang mau dipasang dan yang tidak coba baca widget yang umum dipasang di blog.

Menambah Elemen Sidebar Kanan Menjadi 3 Kolom

Sebenarnya template baru pada perancang template bawaan blogger sangat mudah melakukan menambahan sidebar. Tapi disini tidak membicarakan hal itu, karena kita ingin mengedit template sendiri.

 Melalui Edit HTML

1. Pergilah ke dasbor bloggger
2. Tuju Rancangan dan klik Edit HTML
3. Download template anda untuk berjaga-jaga

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;
}

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

Halaman Body

6. Cari kode seperti ini

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

7. Tambahkan kode ini

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

Menjadi seperti ini

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

</div>

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

8. Save
9. Selesai

Nah!, mudah kan! menambah sidebar disebelah kanan. Caranya hampir mirip dengam menambah kolom header. Kalau belum bisa konsentrasilah pada yang berwarna merah, semua pasti bisa. Kalau belum bisa juga ya diulangi lagi dari awal, pokok nya ye di obrak abrik terus sampai hanjur...wkwkWKwKKK. Selamat anda sekarang sudah berhasil menambah sidebar dengan mengedit sendiri kodingnya.

Kalau masih ada juga yang belum bisa, dibawah ini cara menambah sidebar melalui perancang template, dengan syarat template yang digunakan harus template baru di perancang template.

Menambah Sidebar Melalui Perancang Template

Menambah sidebar melalui perancang template caranya sama seperti cara menganti template di blogger, tapi baiklah ditulis kembali secara ringkas. 
Caranya :
1. Pergilah ke dasbor blogger
2. Tuju Rancangan dan klik Perancang Template
3. Pada draf blogger pilih template baru kalau belum mengunakan template ini.
4. Kalau sudah tuju ke layout
5. Klik salah satu gambar body layout
6. Klik APPLY TO BLOG
7. back to blogger
8.save
9.selesai

Demikianlah cara menambah sidebar baik itu melaui edit HTML yaitu diedit sendiri, maupun melalui fitur perancang template. Selamat bloggiing semoga sukses.

9 comments: Menambah Sidebar Kanan Jadi 3 Kolom

atadroe88 mengatakan...

makasih infonya

Jos mengatakan...

@atadroe
Yub sukses mas

bee1k mengatakan...

ane kok kagak nemu kode yg ini yah mas
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Halim mengatakan...

mantap ^_^ dicoba dulu ya gan,,,

sikkahoder mengatakan...

mantap gan... jadi tahu deh edit tample

Adi mengatakan...

Kalau bisa kasih contoh gambar biar mudah dipahami.

shuttlecock bagus mengatakan...

trimaksih infonya gan,,sangat membantu

Unknown mengatakan...

codenya tidak berguna

Nur Farid Fadjar mengatakan...

Blogwalking gan, please visit Panduan segala ilmu bermanfaat

Posting Komentar

Bagi yang mau comment, mohon tidak spam, pengulangan kata huruf berkali-kali terditeksi spam.

 

Langgan Artikel


Gratis berlangganan artikel via RSS FEED

Atau berlangganan FEED via email :


Pengikut

Copyright © 2012 Membuat Blog Gratis | Powered by Blogger