Masih sekitar utak-atik template Blogspot , kali ini tentang Membuat Sidebar Dua Kolom atau membagi sidebar menjadi 2 kolom . Ceritanya tadi malam blog yang ini saya tambah sidebar 2 kolom dibawah sidebar utama, tentu ada maunya kan ?, ini juga sekaligus manjawab sobat Putra yang menanyakan soal itu dikomentar postingan sebelumnya tentang Buat Footer Multi Kolom . Hasil dari kerjaannya seperti tampak pada screenshot dibawah ini.
Utak-atik yang saya lakukan itu, tentu setelah tanya sama oom google n mampir ke sobat2, saya implementasikan dengan langkah2 sbb. :
- Masuk / login ke Dashboard , pilih Layout --> Edit HTML
- Klik Download Full Template, ini penting sebagai backup, kalau2 nanti malah jadi gak karuan
- Kemudian cari kode ini ]]></b:skin>
- Copy kode dibawah ini kemudian simpan diatas kode ]]></b:skin> tadi.
#lsidebar-wrapper {
float: left;
margin:0 10px 0 5px;
padding:0;
width:150px;
display:inline;
}
.lsidebar {
line-height: 1.5em;
}
.lsidebar .widget {
background: #FFFFFF;
float:left;
width: 140px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}
#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}
.rsidebar {
line-height: 1.5em;
}
.rsidebar .widget {
background: #FFFFFF;
float:right;
width: 130px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}
(Kode warna merah bisa diatur sesuai dengan selera kita)
Atau bisa juga disimpan setelah kode dibawah ini, silahkan aja pilih yg mana suka
/*- Sidebar -*/
#sidebar {
float: left;
width: 320px;
margin: 6px 0px 5px 0px;
padding:0px;
line-height: 18px;
display: inline;
}
- Setelah langkah- diatas, dilanjut dengan mencari kode seperti di bawah ini atau yang mirip2 gitu :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
</div>
- Setelah ketemu hapus dulu kode </div> nya, lalu copy kode berikut dan letakkan di bawahnya.
<div id='lsidebar-wrapper'>
<b:section class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
</div>
Jadi kode tersebut akan tampak seperti ini
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
<div id='lsidebar-wrapper'>
<b:section class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
</div>
- Jika sudah tinggal Save Template
- Jika ingin meletakkan kedua bagian sidebar ini di atas sidebar yang utama, sobat tinggal memasang kode no. 6 di atas kode No. 5 .
-
Pada point 6, harus menghapus kode </div> ( sebetulnya kode ini dipindahkan ke paling bawah di point 6, lihat aja kodenya ada 2), ini dimaksudkan agar sidebar yang ditambahkan akan tetap berada ditempatnya, soalnya kalau gak gini, jika postingan kita lebih pendek dari sidebar, kadang2 sidebar baru itu suka berada di bawah posting, kan gak lucu ya.
- Untuk menyesuaikan lebar sidebar baru, lihat sidebar utamanya. Misalnya sidebar utama lebarnya 300 px, maka lebar sidebar 1 dan 2 bisa sekitar 145, sehingga masih ada sisa 10 px untuk batas atau margin.
- Terakhir saya mau bagi2 kapusing juga, soalnya judul sidebar yg baru dibuat itu fontnya masih belum sama dengan sidebar utamanya.. masih diutak-atik tapi belum ketemu tuh triknya.. lantas karena waktu dah menunjukan pukul 00.30.., mata juga dah ngantuk.. jadi di PR kan aja dulu, siapa tahu ada sobat yg mau ngasih tipsnya..
- Sekedar bewara : Disini sobat juga bisa utak-atik template tentang Cara Membuat Kolom Tambah Gadget di Bawah Header dan cara Buat Footer Multi Kolom yang pernah diposting lebih dulu.
Selamat mencoba utak-atik template dalam Membuat Sidebar Dua Kolom semoga sukses.
Satu lagi informasi bermanfaat yang saya dapat dari kunjungan ke blog anda yang menarik ini.
ReplyDeletebertambah lagi ilmu nich, mantap mas
ReplyDeletepunya saya kan sidebarnya hanya disebelah kanan, bagaimana untuk nambah ke sebelah kiri bang??
ReplyDeleteTx's mas infonya ...
ReplyDeletetak coba ya ...
Kalo mau tambah kolom di bawah (footer) gimana sob? Saya mau bikin recent post n recent comment. Thanks
ReplyDeletesalam sobat
ReplyDeletewah mau banget, pingin mencoba sidebar 2 kolomnya,,
tapi kelihatan rapi nga ya,,,
Wah Kang Saung bagi2 tips 'merenov rumah' ya. Hmmm saya baru saja renov rumah Kang. Gpp yach buat pengetahuan...
ReplyDeleteApa kabar Kang Saung?
@ H.Nizam : Duh si bos ini.. jadi malu.. kalau g ada atap bisa terbang nih..
ReplyDelete@ rumah blogger : sama2 makasih sob
@ Sabirinnet : Utk tambah sebelah kiri.. baca aja postingan tebaruku sob.. sengaja saya persembahkan untuk anda
@ ivenx oyz : thanks sob.. gimana dg galery motornya ??
@ Baca dulu ah : sob.. kok blognya eror tuh.. yg tampil html semua
@ Nura : Makasih sobat.. gimana dengan kunjungan ke galerynya
@ Edwin Personal Blog : Selamat deh.. kalau habis ngerenovmah.. pan bahan bangunan pada mahal nih.. hehe
Eror? Duh kenapa ya. Coba yang ini eror ga?
ReplyDeletesaiia ko' jd malah gag pokus ngBlognya iia kang iia.. duhhh napa nii?!?!?!
ReplyDeleteSulit baget om
ReplyDelete@ Baca dulu ah : sekarang gak error lagi tuh.. siip
ReplyDelete@ genial : kenapa atuh sob...akhir tahun nih.. kita mesti tersenyum menyambut tahun baru 2010 kan ke 2012 masih agak lama hehe
@ Blog Fbycom : makanya daripada ribet ara template yg dah komplit aja...hehehe
Kang, kalo saya sudah siap konsentrasi mau ganti template, boleh nggak saya konsultasi ke akang?
ReplyDelete@ tukang foto : kalau mau ganti template baca aja dulu tipsnya disini
ReplyDeletehttp://saungweb.blogspot.com/2009/06/tips-memilih-template-blog.html
Thanks kakak atas infonya .... dah cari kmana" kgak ada yg bner ... akhirnya ada juga ...
ReplyDeletemainpagenya jadi kekecilan mas. gimana caranya ya, agar mainpagenya tetap, sedangkan sidebarnya jadi 2 kolom seperti template yang saya pakai sekarang. karena masih banyak ruang kosong
ReplyDeleteTernyata bisa ya membuat sidebar 1 kolom dirubah menjadi 2 kolom..
ReplyDeleteMakasih banget infonya ya...
@ Marcel : Syukurlah kalau tips ini berguna
ReplyDelete@ afdil : Ya berarti widtnya harus diperbesar sob
@ Reni : sama2 mbak.. makasih ya....
aduh bos knpa ga bisa2 ya..
ReplyDeletedan kli script awalnya ga sama gmna??
kode ni di scrift klasik apa script tamplate yang lain..
jadi tambah siiip templateq ... untuk iklan ...
ReplyDeletebener tuh informasinya, saya udah coba n hasilnya liat aja di blog saya. Makasih ya informasinya.
ReplyDelete@ tyo angga affandi : mungkin templatenya beda sob.. ini untuk theme baru.. ohya itu ada eror di kotak komentarnya sob.. coba baca ini;
ReplyDeletehttp://saungweb.blogspot.com/2009/10/mengatasi-error-pada-kotak-komentar.html
@ fuda 7 : silahkan di cicipi sob
@ Faris : yups saya lihat hasilnya sangat ok tuh.. selamat yah
jadi kolom di sidebar bisa di bagi 2 ya.. punya saya cuma satu,, boleh deh untuk coba-coba,,
ReplyDeleteotak-atik template lagi...makasih infonya
ReplyDeletesore sob, klo tips ini rada jelimet, pusing aku...happy blogging sob, just dropt by ^_^
ReplyDeletekang kok punya saya jadi nya atas bawah sih bukan kiri kanan gtu?
ReplyDeletenice info gan...
ReplyDeletehttp://caraindra.blogspot.com
Tidak harus membuat syntax baru untuk membuat dua sidebar. Cukup dengan mengambil ID/class sidebar pertama saja saya rasa itu sudah cukup. Lalu dipasangkan pada sidebar kedua.
ReplyDeleteMemang kadang ada pesan error xml karena ID sama, tetapi ini bisa diakali kuk dengan mengkamuflasekan ID nya. saya lebih suka menggunakan cara ini dibandingkan membuat syntax baru.
hatur nuhun kang,,,,mo nyoba nih
ReplyDeletepunya saya kan sudah 2 kolom. tapi saya pingin jadiin satu kolom. caranya gimana?
ReplyDeletemantap. ini dia yang aku cari. thanks bro. . .
ReplyDeletehttp://melodacomputer.blogspot.com
http://mayyu-healthy.blogspot.com
http://cellularmobile9.blogspot.com
http://indocomics.blogspot.com
http://japanchord.blogspot.com
Mohon izin bookmark blog na bro..
ReplyDeleteThank's...!
FarmVille Tools
cakep tutorialnya tapi belum berhasil nih, nambahin 2 colom baru di sidebar... kayaknya masih ada yang kelewat....
ReplyDeletetutorial yang sangat bagus bos and makasih atas sheringnya...
ReplyDeleteThanks Infonya... :)
ReplyDeletewah lagi nyari ini ternyata nemu disini, mkasih bang saung tutorialnya langsung gua praktekin di blog Tembang Lawas saya :-)
ReplyDeletemkasih kang saung tutorialnya :-)
ReplyDeletethank's sob...
ReplyDeletetapi tampilanya ko gak kaya sidebar atasnya ya,,..???
PLANETTO.BLOGSPOT.COM
makasih mas atas tipsnya.barangkali bermanfaat
ReplyDeletethanks sob, akhirnya bisa juga :D
ReplyDeletegak berhasil gan,,,,,
ReplyDeletegimana nih... malah jadi dua baris widget, nukan 2 kolom :'(
Mantapppp ni tutorialnya,,,,,
ReplyDeleteNaruto Wikipedia|Naruto Wikipedia English|Naruto Wikipedia Shippuden|Naruto Wikipedia Indo
ReplyDeleteNaruto Community|Naruto Fan|Naruto Network|Naruto Forum|Naruto Cosplay
ReplyDeleteNaruto Shop|Naruto Shop Online|Naruto Shop In Japan|Naruto Shop Indonesia
ReplyDeleteNaruto Shippuden Soundtrack|Naruto The Movie Ost|Naruto Movie Song
ReplyDeleteNaruto Movie Free Download|Naruto Shippuden Free Download|Download Naruto Episodes
ReplyDeleteNaruto 535|Naruto Manga 536|Naruto Shippuden Manga 537|Naruto 538 Manga|Naruto 539 Spoiler
ReplyDeleteNaruto GBA Roms|Naruto RPG NDS|Naruto RPG 4.0|Naruto RPG 3 Games|Naruto RPG 2 English
ReplyDeleteNaruto Sage Mode Wallpaper|Minato Namikaze Wallpaper|Kakashi Hatake Wallpaper
ReplyDeleteNaruto Manga Spoiler|Naruto Manga Online Scans|Naruto Manga English Online
ReplyDeleteRead Online Naruto|Naruto Spoiler|Naruto Comic|Naruto Manga|Naruto Raw and Prediction
ReplyDeleteMantap gan... Update teruslah tutorial kaya gini....
ReplyDeletemakasih ya mas atas ilmunya,hehehe
ReplyDeleteTx's mas infonya ...
ReplyDeletetak coba ya ...
nice informasi untuk tampilan personalisasi blog kita
ReplyDeletenot work
ReplyDeleteNice share broo..
ReplyDeleteKeep posting yaa :)
Terapi Ion Elektrik Rendam Kaki Detox
Peluang Usaha Rumahan
Terapi Ion
Manfaat Terapi Ion Elektrik
Terapi Ion Elektrik
Terapi Kesehatan Murah
Peluang Usaha Modal Kecil
Makasih ya Gan atas ngilmunya...
ReplyDeleteBermanfaat bagi pemula seperti saya...
Salam Sukses
nice article…thanks, nice can't wait for this...thanks
ReplyDeleteKami menyediakan informasi agen rental mobil dan sewa mobil Paket sewa mobil harian, mingguan dan bulanan.
nice article…thanks, nice can't wait for this...thanks
ReplyDeleteKami menyediakan informasi agen rental mobil dan sewa mobil Paket sewa mobil harian, mingguan dan bulanan.
nice article…thanks, nice can't wait for this...thanks
ReplyDeletewaralaba / franchise bimbel - peluang usaha modal kecil hasil maksimal