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

35 comments: Menambah Sidebar Sebelah Kiri

Teknokers mengatakan...

aku coba ya mas, semoga berhasil karena ini yang aku cari-cari. Sidebar blogku mau tak tambah di sebelah kiriaku coba ya mas, semoga berhasil karena ini yang aku cari-cari. Sidebar blogku mau tak tambah di sebelah kiri

Jos mengatakan...

Yup Silakan

Rouen mengatakan...

wah mas2 ini kan tutorial buat di copas code2nya, ilangin lah script yang nyusahin buat copas ntu, ngejlimet banget jadinya malah rusak template saya

Jos mengatakan...

@Rouen
Makasih Mas sudah ingatin, kemaren saya nyoba script tapi lupa mengapus, maaf ya..sekarang sudah dihilangkan kok.

Dimas mengatakan...

Mantap Mass... SIlahlan berkunjung di blogku ya.... Lumayan Bagus Lho hhahaaaaa

Jos mengatakan...

@Dimas
Saya telah berkunjung hanya saja tidak meninggal jejak karena saya binggung blog mas Dimas yang eksis yang mana? maaf ya

SMP NEGERI 3 KISMANTORO mengatakan...

makasih infonya

goesadi mengatakan...

thanks buat infonya, soalnya saya baru biki blog, tapi blog saya itu kusus game bro, ada gax triknya biar blog saya itu banyak pengunjungnya ?

Jos mengatakan...

@goesadi
Membangun blog harus bersabar mas Goesadi, Mari kita belajar sama-sama, yang pasti buat blog yang berguna bagi orang lain dan rajin posting. Langkah membuat blog dari awal versi saya sudah saya sharing klik aja link yang ada di header blog ini

Muflich Kamil mengatakan...

Wah, hebat nih mas. makasih dah berbagi.. oh ya, mampir balik yah, ke blog punya saya.. moga" kita bisa saling kenal lebih jauh.

Salam Blogger

Jos mengatakan...

@Muflich Kamil
Saya sudah berkunjung, tapi saya kesulitan berkomentar pada blognya. Saran saya perbaiki kotak komentar dan verifikasinya..

Muflich Kamil mengatakan...

Wah, makasih bang sarannya. Mungkin gara" itu juga komentar yang selalu saya tunggu ga datang-datang :(

NYONGAMBON89 mengatakan...

MAKASIH TIPSNYA BRO... SUKSES...
SALAM KENAL TUKAR LINK BOLEK G BRO?

Aditia Novit mengatakan...

wahh
Siip dehh buat tutorial blogspotnnyaa

MisteriRembang mengatakan...

klik google mau nambah side kiri nemuin ini.. AKu cobain ya mas...

Mampir dong ke gubug misteri

Muhammad Husin Nafarin mengatakan...

kenapa kode yang disuruh cari tidak ada di tamplate saya, apakah setiap tamlate berbeda-beda ?

Angga Ardhinata mengatakan...

thanks infona ...
http://sempalansoftware.blogspot.com/

david effendi mengatakan...

bro . . . . templat blog saya itu cuman 1 kolom, terus klo saya mau nambhin 1 kolom dikiri paki cara yg bro tulis ini bisa g ya?

Yuma Tanjung mengatakan...

pusing ane

Yuma Tanjung mengatakan...

akhirnya bsa juga
http://pastiterpantau.blogspot.com/

Uyunk Sidharta mengatakan...

INFO KESEHATAN DAN KECANTIKAN
Cream Pemontok Payudara
Cream Pembesar Payudara
Bra Pembesar Payudara
Alat Pembesar Payudara
Selaput Dara Buatan
Obat Keputihan
Penghilang Stretch Mark
Pemutih Ketiak dan Selakangan
Penghilang Bekas Luka
Penumbuh Rambut
Pemerah Bibir dan Puting
Perontok Bulu Permanen
Obat Penghilang Tatto
Obat Peninggi Badan
Obat Penggemuk Badan
Obat Penghilang Jerawat
Cream Deoonard Pemutih Wajah
Cream Pemutih Wajah Tensung
Cream Seven Day
Obat Pemutih Badan
Cream Pemutih Badan
Pemutih Gigi Herbal
Obat Mata Min Plus Katarak
Gel Pelicin Vagina
Obat Penyubur Kandungan


KATEGORI PRODUK DEWASA
Obat Kuat Sex
Obat Pembesar Penis
Alat Pembesar Penis
Alat Pembesar Payudara
Obat Perangsang Wanita
Obat Pelangsing Herbal
Alat Bantu Sex Wanita
Alat Bantu Sex Pria
Kondom Duri Bergerigi

CENTRA SHOP mengatakan...

ALAT BANTU SEX PRIA
BONEKA SEX FULLBODY CANTIK
VAGINA PINGGUL SILIKON
VAGINA GETAR BULU PENGHANGAT
VAGINA GETAR GOYANG SUARA

ALAT BANTU SEX WANITA
PENIS MUTIARA GETAR GOYANG
PENIS IKAT PINGGANG ELEKTRIK
PENIS TEMPEL DUDUK ELEKTRIK
PENIS MUTIARA GETAR GOYANG MAJU MUNDUR

PRODUK KESEHATAN
OBAT PENGGEMUK BADAN
OBAT PENGHILANG TATTO PERMANEN
OBAT PEMBESAR PAYUDARA
OBAT PEMBESAR PENIS HERBAL
OBAT PERANGSANG AMPUH
OBAT KUAT SEX HERBAL

Ruang Dewasa mengatakan...

Thank you for sharing in this article
I can learn a lot and could also be a reference
I hope to read the next your article updates
obat pembesar penis , Vimax Original

andhi mengatakan...

siip dah..

alat bantu sex mengatakan...

INFO LENGKAP KESEHATAN KECANTIKAN KEPERKASAAN KEJANTANAN DAN KEWANITAAN :

boneka full body
obat pembesar penis
alat pembesar penis
obat perangsang wanita
pro extender
obat gemuk
minyak lintah
obat pelangsing badan
alat pembesar payudara
obat pembesar payudara
cream pembesar payudara
cream pemutih badan
cream pemutih wajah
obat pemutih badan
pemutih ketiak
obat penghilang jerawat
pemerah bibir
cream pelangsing badan
obat perapat vagina
peninggi badan
perontok bulu
penghilang stretch mark
penumbuh rambut
penghilang bekas luka
pembesar pantat
vimax oil
black mamba
celana vakoou
viagra
neosize
vimax
cobra oil
klg
alat bantu sex
pembesar penis
griya klinik pasutri
mas bawer

Cagkhie aey mengatakan...

terimah kasih gan saya berhasil sil... thank infonya

TukangBekling mengatakan...

thank ya sangat membantu
kalau mau tau rahasia cantik para artis main ke web ku yaa ^_^
index:beautywater.id - index:obatkuatalong.com - index:pembesarpenisjakarta.com - index:juraganobatimport.com
obat kuat
obat kuat viagra
obat kuat
obat kuat
obat kuat pria
obat pembesar penis
vimax asli
pembesar penis
sex toys wanita
obat perangsang
obat kuat viagra
obat kuat sex
obat kuat
http://www.escape.sg/users/obatkuatalong
http://wwwcf.fhwa.dot.gov/exit.cfm?link=http://obatkuatalong.com
http://stnw.nhtsa.gov/exit.cfm?link=http://obatkuatalong.com
http://obatkuat.coffeecup.com
https://asrayiklan.wordpress.com/2015/03/29/obat-kuat-pria-itu-kuat-seperti-apa/
https://asrayiklan.wordpress.com/2015/01/11/harga-obat-kuat-viagra-jakarta-asli/
https://asrayiklan.wordpress.com/2015/01/11/fenomena-obat-kuat-pria/
https://asrayiklan.wordpress.com/2014/02/23/cara-menghilangkan-selulit-di-tubuh-anda/

Leo Herbalis mengatakan...

Thank you for sharing in this article
I can learn a lot and could also be a reference
I hope to read the next your article updates
Vimax Asli
Ciri-ciri Vimax Asli Canada
Vimax Original
Obat Pembesar Penis Herbal
Agen Vimax Original
Vimax
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada
Vimax Asli Canada

Central Herbal Indonesia mengatakan...

> Vimax Canada Pembesar Penis Herbal
> KLG Pills Pembesar Penis Herbal
> Pembesar & Mengencangkan Payudara
> Obat Ambeien | Obat Wasir
> Celana Hernia | Obat Hernia
> Obat Asam Urat
> Alat Bantu Sex Pria
> Alat Bantu Sex Wanita
> Obat Kuat Perkasa
> Alat Pembesar Penis
> Perangsang Wanita Potenzol
> Perangsang Wanita Sex Drop
> Kondom Elektrik

> 17 Cara Memutihkan Kulit Wajah Secara Alami
> 11 Bahaya Efek Samping Suntik Pemutih
> 13 Manfaat Buah Alpukat Untuk Kesehatan
> Manfaat Cangkang Telur Untuk Kesehatan
> Memahami Penyakit Hernia
> Penyakit Asam Urat
> Penyebab Payudara Kendur
> Teknik Orgasme G-Spot
> Hindari 5 Minuman Ini Gar tak Mudah Gemuk

Berita terkini - tips dan trik mengatakan...

Proextender
Vakum pembesar penis
Vakum pembesar payudara
Pemerah bibir
obat viagra
Cream kuda jantan
Procomil spray
Maximum powerfull
Pembesar penis
Vimax asli
KLG
Neosize xl
Vigrx plus
Perangsang permen karet
Opium spray
Sexdrop
Potenzol
Blue wizard
Penghilang tato
Pelangsing biolo
Fruit plant
Fatloss
Vagina bulu elektrik
Vagina getar goyang
Boneka full body
Vagina flashlight
Vibrator mic
Penis tempel telur
Vibrator maju mundur
Vimax
viagra
Procomil spray
Sony mmc
Nangen
Levitra
Vmen Plus
Vimax asli
Vmen

 

Outlet Vimax mengatakan...

> JUAL OBAT PEMBESAR PENIS REKOMENDASI PARA DOKTER

> ARTIKEL KESEHATAN SEKSUAL

> JUAL OBAT BIUS CAIR LIQUID SEX

> JUAL OBAT PERANGSANG CAIR BLUE WIZARD

> JUAL OBAT PERANGSANG CAIR POTENZOL

> JUAL PERANGSANG PERMEN KARET SEXLOVE

> JUAL PERANGSANG SUOYINGAO GEL

> JUAL OBAT PERANGSANG SERBUK

> JUAL OBAT PERANGSANG CAIR SEXDROP

Mawar Hati mengatakan...

OBAT KUAT LELAKI SEJATI

http://www.zonasuplemen.com/
http://www.zonasuplemen.com/
http://www.zonasuplemen.com/

http://www.zonasuplemen.com/vimax-vimax-pembesar-alat-vital.html
http://www.zonasuplemen.com/vimax-vimax-pembesar-alat-vital.html
http://www.zonasuplemen.com/vimax-vimax-pembesar-alat-vital.html



OBAT PEMBESAR PENIS ENHANCERX

http://obatpembesarmurah.com/
http://obatpembesarmurah.com/
http://obatpembesarmurah.com/



JUAL PERTAMINA, JUAL PERAMINI DIGITAL

http://jualpommini.blogspot.co.id/
http://jualpommini.blogspot.co.id/
http://jualpommini.blogspot.co.id/



OBAT PEMBESAR ALAT VITAL VIMAX

http://vimax-klgasli.com/
http://vimax-klgasli.com/
http://vimax-klgasli.com/



JUAL OBAT BIUS MANJUR

http://jualobatbiusasli.weebly.com/
http://jualobatbiusasli.weebly.com/
http://jualobatbiusasli.weebly.com/



CERITA MESUM - CERITA SEX
http://liputan6sore.blogspot.co.id/
http://liputan6sore.blogspot.co.id/
http://liputan6sore.blogspot.co.id/


OBAT ABORSI MANJUR

http://www.cytotecpfiser.com/cytotec-obat-aborsi-usia-1-bulan.html
http://www.cytotecpfiser.com/cytotec-obat-aborsi-usia-1-bulan.html
http://www.cytotecpfiser.com/cytotec-obat-aborsi-usia-1-bulan.html
http://www.cytotecpfiser.com/cytotec-obat-aborsi-usia-1-bulan.html


http://www.zonasuplemen.com/
http://obatpembesarmurah.com/
http://vimax-klgasli.com/
http://jualobatbiusasli.weebly.com/
http://jualpommini.blogspot.co.id/
http://www.cytotecpfiser.com/


Jual Obat Pembesar penis di surabaya mengatakan...

makasih infonya om, . .

anabolic rx24 asli mengatakan...

nice blog

Jual Titan Gel Asli di Medan mengatakan...

Mantap...

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