Cara Membuat Kolom Sidebar - Cara Menambah Kolom di Sidebar Blog - Sebenarnya malu juga sama bos saya Creating Website, template hasil karyanya saya acak-acak,hihi. Tapi ga masalah toh bos, saya hanya menambah widget di sidebar karena saya rasa kurang.
Menambah Kolom Widget Sidebar template blogspot sah-sah saja asal tak terlalu memberatkan pada loading blog kita. Menambah kolom ini dirasakan perlu manakala banyak widget yang kita butuhkan sementara para perancang template hanya (memberi) membatasi 1 kolom di sidebar. Saya akan memberikan 3 kolom sekaligus, namun bila sobat hanya perlu satu kolom silahkan buang satu kode section dan satu kode CSS skin.
Saya ingatkan untuk Menambah Gadget di Sidebar ini sobat
Masuk ke Akun Blogger milik sobat
Lalu Rancangan - klik Edit HTML
Centang Expand Template Widget
Pergiat dengan mencari kode di bawah ini ( gunakan Ctrl+F untuk mempercepat ) ;Masuk ke Akun Blogger milik sobat
Lalu Rancangan - klik Edit HTML
Centang Expand Template Widget
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
(kode di template yang saya pakai terlalu panjang) dan seterusnya sampai menemukan ;
</b:section>
--- Tambahkan Kode Widget Sidebar sobar disini ----
</div>
Kemudian, tambahkan kode di bawah ini di antara kode </b:section> dan </div>
<b:widget id='Text143' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text245' locked='false' title='Column 2' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-atas' showaddelement='yes'>
<b:widget id='Text346' locked='false' title='Column 3' type='Text'/>
</b:section>
<div style="clear: both;"></div>
Lalu tambahkan kode CSS di bawah, di atas kode ]]></b:skin>
#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}
#kolom-atas {
width: 99%;
float: right;
}
Lalu Simpan Template sobat dan lihat hasilnya !
Nach Bila penyimpanan kode diatas sudah benar maka akan dihasilkan widget di sidebar seperti gambar di bawah ini, atau sahabat bisa lihat tampilan widget di Cinta Deras :
Catatan :
49 % dan 99% adalah nilai lebar dari widget yang kita buat, jika tak sesuai dengan template sobat silahkan silahkan mengubahnya hingga Pas dan Mantap.
Selamat berpuasa, happy weekend and tentunya....,
Happy Blogging.My Inspiration :
http://www.mfrifanto.com/2012/03/cara-menambah-kolom-di-sidebar-blog.html
Ternyata tak jauh sop ya,ada disini.
BalasHapusWidget sidebar saya hanya satu,mohon ijin tuk praktek.
Makasih infonya.
Moga bisa diterapkan di blog sobat,senang bisa membantu.Selamat bersksperimen sop,happy blogging.
Hapusterimakasih sudah dishare Cara Menambah Kolom di Sidebar Blog dibookmark dulu ya :D
BalasHapusnanti kalau ada waktu ngoprek akan di coba.. nice share
Masama Mas,makasih banyak untuk komaentarnya,salam kebersamaan and happy blogging.
Hapuskalo2 nanti sy pengen buat tambahan sidebar lagi, saya pasti datang lagi ke tempat ini. punten, omat pisan tong disasaha nya!!!.
BalasHapuswilujeng
Hehehe !
HapusPunya Akang sudah bayaj sidebarnya,rasanya itu sudah lebih dari cukup.
HapusMoal Kang santai ajah,paling ku abdi dianggap ucing nyalira(hehe,canda dot com).
Thanks.
wah nice tutor neng...
BalasHapusMakasih sop,happy blogging ajah.
Hapusijin praktek gan..
BalasHapusLangsung turun ijinnya sop,silahkan,hihi.
Hapusnice share.. kapan2 di coba.. hehe
BalasHapusmantap :D
BalasHapusThnaks 4 U kawan.
Hapusmanfa'at sekali tutornya Sob. saya msh blm punya keinginan tuk nambah kolom sidebar lg. mungkin lain saya cb.
BalasHapusnice infonya Sob..
Kalau kurang dibutuhkan jangan dulu Mas,nanti ajah klo sudah sudah perlu.
HapusMaksih hadirnya,happy bloggging.
wah wah.. :D
BalasHapusmulanya saya juga mau melebarkan sidebar, tapi tidak jadi.. :)
saya juga kebingungan mempartisi sidebar menjadi berapa.. :D
Hehe,dunia persilatan akan marah klo blogazine pake widget sidebar.
HapusThanks sop,happy blogging ajah.
"blogzine" itu apaan yah??? -tik..tok..tik..tok-
Hapusnice share sobs.. ^_^
Hihi,sori sop,ane hanya melihat sekilas,sangka nae blog punya mas AIR bertema blogazine.
HapusBlogazine adalah blog yang mengusung template model majalah atau koran,bisa dikatakan tanpa sidebar(satu halaman).
Makasih sop.
Cocok nih... thanks sobb...
BalasHapusSenang bisa berbagi,makasih sop ya.
Hapussangat bermanfaat sekali posting ini.. ditunggu update tips n trik tutorial terbarunya,,hehe hapyy blogging
BalasHapusLagi puasa nieh Gan blom ada tenaga tuk menulis,hehe.
HapusMakasih dah singgah,happy blogging ajah.
tak bookmark dulu sob,cp tw kemudian hari saya butuh :D
BalasHapusMakasih sop,met weekend aja and tentunya happy blogging.
Hapuskeren nih tipsnya.. ane simpan dulu ya untuk ane gunakan nantinya.. :D
BalasHapusHalah disimpan malah nanti lupa lagi naronya,hehe.
HapusThanks ya sop,happy blogging ajah.
tip dan trik nya menarik dan mudah di ikuti tapi sedikit masukan nich sobat gimana kalau background postingan nya dirubah dengan yang kontras dengan warna font nya, utama nya font yang warna biru mohon di maaf kan sekedar saran jika tidak berkenan anggap angin lalu...:happy weekand & happy blogging
BalasHapusJangan sungkan sop,ini masukan yang bagus.
HapusSaya mengganti latar postingan ini dengan pertimbangan "mata biar ga cepat lelah",klo itu memang yang terbaik, akan saya usahakan tuk menggantinya.
Makasih kawan,happy blogging.
SUkses dicoba, kesalahan hanya pada ukuran sekali raba, langsung sukses.Makasih sob
BalasHapustanks infonya sob
BalasHapusvisit back ya :) http://achsanarea23.blogspot.com
mantab gan
BalasHapusmampir :D http://idegemilang.blogspot.com/