12/3/09

Membuat Sidebar Dua Kolom


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.
Buat Sidebar 2 Kolom
Utak-atik yang saya lakukan itu, tentu setelah tanya sama oom google n mampir ke sobat2, saya implementasikan dengan langkah2 sbb. :
  1. Masuk / login ke Dashboard , pilih Layout --> Edit HTML
  2. Klik Download Full Template, ini penting sebagai backup, kalau2 nanti malah jadi gak karuan
  3. Kemudian cari kode ini ]]></b:skin>
  4. 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;
        }



  5. 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>



  6. 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>



  7. Jika sudah tinggal Save Template
Beberapa catatan :
  1. Jika ingin meletakkan kedua bagian sidebar ini di atas sidebar yang utama, sobat tinggal memasang kode no. 6  di atas kode No. 5 .

  2. 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.
  3. 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.
  4. 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..
  5. 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.


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Membuat Sidebar Dua Kolom, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

63 comments:

  1. Satu lagi informasi bermanfaat yang saya dapat dari kunjungan ke blog anda yang menarik ini.

    ReplyDelete
  2. bertambah lagi ilmu nich, mantap mas

    ReplyDelete
  3. punya saya kan sidebarnya hanya disebelah kanan, bagaimana untuk nambah ke sebelah kiri bang??

    ReplyDelete
  4. Tx's mas infonya ...

    tak coba ya ...

    ReplyDelete
  5. Kalo mau tambah kolom di bawah (footer) gimana sob? Saya mau bikin recent post n recent comment. Thanks

    ReplyDelete
  6. salam sobat
    wah mau banget, pingin mencoba sidebar 2 kolomnya,,
    tapi kelihatan rapi nga ya,,,

    ReplyDelete
  7. Wah Kang Saung bagi2 tips 'merenov rumah' ya. Hmmm saya baru saja renov rumah Kang. Gpp yach buat pengetahuan...

    Apa kabar Kang Saung?

    ReplyDelete
  8. @ H.Nizam : Duh si bos ini.. jadi malu.. kalau g ada atap bisa terbang nih..
    @ 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

    ReplyDelete
  9. Eror? Duh kenapa ya. Coba yang ini eror ga?

    ReplyDelete
  10. saiia ko' jd malah gag pokus ngBlognya iia kang iia.. duhhh napa nii?!?!?!

    ReplyDelete
  11. @ Baca dulu ah : sekarang gak error lagi tuh.. siip
    @ 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

    ReplyDelete
  12. Kang, kalo saya sudah siap konsentrasi mau ganti template, boleh nggak saya konsultasi ke akang?

    ReplyDelete
  13. @ tukang foto : kalau mau ganti template baca aja dulu tipsnya disini
    http://saungweb.blogspot.com/2009/06/tips-memilih-template-blog.html

    ReplyDelete
  14. Thanks kakak atas infonya .... dah cari kmana" kgak ada yg bner ... akhirnya ada juga ...

    ReplyDelete
  15. mainpagenya 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

    ReplyDelete
  16. Ternyata bisa ya membuat sidebar 1 kolom dirubah menjadi 2 kolom..
    Makasih banget infonya ya...

    ReplyDelete
  17. @ Marcel : Syukurlah kalau tips ini berguna
    @ afdil : Ya berarti widtnya harus diperbesar sob
    @ Reni : sama2 mbak.. makasih ya....

    ReplyDelete
  18. aduh bos knpa ga bisa2 ya..
    dan kli script awalnya ga sama gmna??
    kode ni di scrift klasik apa script tamplate yang lain..

    ReplyDelete
  19. jadi tambah siiip templateq ... untuk iklan ...

    ReplyDelete
  20. bener tuh informasinya, saya udah coba n hasilnya liat aja di blog saya. Makasih ya informasinya.

    ReplyDelete
  21. @ tyo angga affandi : mungkin templatenya beda sob.. ini untuk theme baru.. ohya itu ada eror di kotak komentarnya sob.. coba baca ini;

    http://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

    ReplyDelete
  22. jadi kolom di sidebar bisa di bagi 2 ya.. punya saya cuma satu,, boleh deh untuk coba-coba,,

    ReplyDelete
  23. otak-atik template lagi...makasih infonya

    ReplyDelete
  24. sore sob, klo tips ini rada jelimet, pusing aku...happy blogging sob, just dropt by ^_^

    ReplyDelete
  25. kang kok punya saya jadi nya atas bawah sih bukan kiri kanan gtu?

    ReplyDelete
  26. nice info gan...

    http://caraindra.blogspot.com

    ReplyDelete
  27. 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.

    Memang 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.

    ReplyDelete
  28. hatur nuhun kang,,,,mo nyoba nih

    ReplyDelete
  29. punya saya kan sudah 2 kolom. tapi saya pingin jadiin satu kolom. caranya gimana?

    ReplyDelete
  30. mantap. ini dia yang aku cari. thanks bro. . .

    http://melodacomputer.blogspot.com
    http://mayyu-healthy.blogspot.com
    http://cellularmobile9.blogspot.com
    http://indocomics.blogspot.com
    http://japanchord.blogspot.com

    ReplyDelete
  31. Mohon izin bookmark blog na bro..
    Thank's...!

    FarmVille Tools

    ReplyDelete
  32. cakep tutorialnya tapi belum berhasil nih, nambahin 2 colom baru di sidebar... kayaknya masih ada yang kelewat....

    ReplyDelete
  33. tutorial yang sangat bagus bos and makasih atas sheringnya...

    ReplyDelete
  34. wah lagi nyari ini ternyata nemu disini, mkasih bang saung tutorialnya langsung gua praktekin di blog Tembang Lawas saya :-)

    ReplyDelete
  35. thank's sob...

    tapi tampilanya ko gak kaya sidebar atasnya ya,,..???

    PLANETTO.BLOGSPOT.COM

    ReplyDelete
  36. makasih mas atas tipsnya.barangkali bermanfaat

    ReplyDelete
  37. gak berhasil gan,,,,,
    gimana nih... malah jadi dua baris widget, nukan 2 kolom :'(

    ReplyDelete
  38. Naruto Wikipedia|Naruto Wikipedia English|Naruto Wikipedia Shippuden|Naruto Wikipedia Indo

    ReplyDelete
  39. Naruto Movie Free Download|Naruto Shippuden Free Download|Download Naruto Episodes

    ReplyDelete
  40. Naruto 535|Naruto Manga 536|Naruto Shippuden Manga 537|Naruto 538 Manga|Naruto 539 Spoiler

    ReplyDelete
  41. Naruto GBA Roms|Naruto RPG NDS|Naruto RPG 4.0|Naruto RPG 3 Games|Naruto RPG 2 English

    ReplyDelete
  42. Naruto Sage Mode Wallpaper|Minato Namikaze Wallpaper|Kakashi Hatake Wallpaper

    ReplyDelete
  43. Naruto Manga Spoiler|Naruto Manga Online Scans|Naruto Manga English Online

    ReplyDelete
  44. Read Online Naruto|Naruto Spoiler|Naruto Comic|Naruto Manga|Naruto Raw and Prediction

    ReplyDelete
  45. Mantap gan... Update teruslah tutorial kaya gini....

    ReplyDelete
  46. makasih ya mas atas ilmunya,hehehe

    ReplyDelete
  47. nice informasi untuk tampilan personalisasi blog kita

    ReplyDelete
  48. Makasih ya Gan atas ngilmunya...
    Bermanfaat bagi pemula seperti saya...
    Salam Sukses

    ReplyDelete
  49. nice article…thanks, nice can't wait for this...thanks

    Kami menyediakan informasi agen rental mobil dan sewa mobil Paket sewa mobil harian, mingguan dan bulanan.

    ReplyDelete
  50. nice article…thanks, nice can't wait for this...thanks

    Kami menyediakan informasi agen rental mobil dan sewa mobil Paket sewa mobil harian, mingguan dan bulanan.

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger