Membuat 2 atau 3 kolom di bawah header

Penutup tutorial blog di bulan puasa ini , saya akan memposting bagaimana cara membuat 2 kolom di bawah header , ini buat sobat blogger yang suka menaruh banyak widget untuk mempercantik blognya, dan sempat di tanyakan juga oleh pembaca blog ini yaitu sobat badot, setelah mencari inspirasi akhirnya ketemu juga bagaimana caranya membuat 2 kolom di bawah header, kalau mau lihat screenshotnya di bawah ini :

Screen shootnya
Dan hasil nyatanya sementara ini saya aplikasikan di blog ini
Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Simpan hasil pekerjaan sobat
3. Kemudian cari kode <div id='main-wrapper'>, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan kembali hasil pekerjaan sobat
4. Setelah selesai menyimpan, kemudian sobat ke Layout dan lihat hasilnya.
Kode pada tahap 3 bisa sobat modifikasi apabila ingin menambahkan 3 kolom di bawah header yang perlu di perhatikan adalah widht dengan floatnya!!

Tapi kalau sobat bingung saya sudah sediakan kode untuk menambahkan 3 kolom di bawah header, silahkan ikuti langkah 1 dan 2 kemudian ketika tahap 3 masukkan kode ini :


<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Semua tergantung kebutuhan sobat dalam menambahkan widget, dan saya sampaikan terimakasih banyak telah menjadi pembaca setia blog ini :p . Happy blogging sobat and be Thinking Out Of The Box!!

post signature

57 comments:

  1. Ok deh Makasih Nih Tipsnya... Saya Pelajari sapa Tau Saya Menemukan Inspirasi :D Sukses Selalu Boz... /lari

    ReplyDelete
  2. asyiiiik..ntar lagi akan aku coba. trili..li...li...trala..la..la....

    ReplyDelete
  3. tapi aa' musti disesuaiin jg ama lebar header nya yak?
    pgn yg 3 kolom hehehe buat gmbr2 aja si

    ReplyDelete
  4. horeeee..aku bisa...wah keren juga tuh. dah aku bikin, barusan. cool deh pokoknya...

    ReplyDelete
  5. sevbenarnya sih pengen banget nambahin weidget,tapi takut jadi tambah berat

    ReplyDelete
  6. /hm keren juga....
    tapi kenapa kamu gini --> /bom terus sih??
    ampun deh /kembik2.....

    ReplyDelete
  7. jadi tips ini hanya untuk blogspot aja ya?

    ReplyDelete
  8. Suhu, mungkin ga nambah kolom disebelah kiri kolom utama?

    ReplyDelete
  9. yuhui lanjut deh.. mantep /lari

    ReplyDelete
  10. kang kalau misal nambah 1 kolom untuk sidebar gimana...??kan sidebarku ada 2 kolom diatas 2 kolom itu mau tak tambahi 1 kolom, kayak punya sampyan ini lho.
    thanks sebelumnya

    ReplyDelete
  11. wah ....bagus juga nih....boleh di kantongi nih ilmunya suhu.......
    lanjut suhu.....ilmunya

    ReplyDelete
  12. hemmm jadi bisa neh buat lauoy MSN neh...selsai lebaran diselasaikan semua..hehe

    ReplyDelete
  13. kren om.......bagus juga neh.....

    ReplyDelete
  14. wuduw.. ulik2 html lagi yak, oh no.. hehehe wen sering bingungan ni yg beginia mas:D

    ReplyDelete
  15. Wow, keren nie..

    Saya bisa gak ya???

    ReplyDelete
  16. @ ade > silahkan
    @ cebong > sudah di bagi persen neng jadi otomatis terbaginya ada cara lain juga yaitu dengan membagi per pixel harus di sesuaikna dengan width headernya.
    @ gadis > yups saya sudah lihat blognya diah jadi keren
    @ rain > tidak mesti widget yang di pasang bisa hanya tulisan atau profile yang punya blog tergantung kebutuhan
    @ jovie > hahahahahaha.... nyindir nih
    @ kumpulnet > yups kebetulan blogspot saya bisanya om /hehe
    @ gus > bisa om, kalau ada waktu nanti saya akan memposting hal tersebut juga
    @ oeoes > bisa kang insya Allah saya bahas juga
    @ wendy > learn by doing mba nanti juga bisa
    @ wendra > pasti bisa kok wen kalau sering berlatih
    @ jaloee > makasih kang /licik , mau tahu tidak kang sumber inspirasi saya adalah akang /kembik2
    @ indung > weks.. buka bilang-bilang di sini /lari

    ReplyDelete
  17. sepp, /hore
    kalo buat WP gimana om? /baca

    ReplyDelete
  18. Ini trik barunya mas??ane sih udah bisa nyang ini.hehehe(sombong mode ON).

    ane kenapa ya??beberapa hari ini ga semangat buat nulis, BW, dll. kerjaannya bengong, tidur. buka inet ga tau mo ngapain... /hm
    bener2 kurang gairah, kurang tenaga(iklan kalee). Kerjaan ga ad yg dikerjain.../hiks.

    Apa ini yang dinamakan fallin in love??/grogi

    ReplyDelete
  19. @ arielz > waduh kang ariel saya masih blank kalau WP mungkin kang arielz bisa yak /licik
    @ herro > /baca yups saya salute dengan ente bro bisa bikin template sendiri ane sendiri lagi mau mengerjakan template juga sih hanya waktunya belum ada /hm yang jelas bukan postingan ini bro, namanya juga rahasia, lagi cari bahannya dulu pokoknya ada deh /licik

    ReplyDelete
  20. wuih... tutorialnya banyak banget... hebat oiy... thx yaa /hore

    ReplyDelete
  21. ingin kumengerti,tapi tetep gak ngerti buat. bantuin,bisakah?

    ReplyDelete
  22. Sip2x kerennya tutornya /hore

    ReplyDelete
  23. sweeep.. aduh keduluan.. tapi gak papa deh... makasih kang infonya.. n juga selamat hari raya idul fitri.. mohon maaf lahir batin... ehh ni bukan spam looo /lari

    ReplyDelete
  24. Keren kang tutorialnya, saya kemarin udah nyoba, takbuat satu kolom aja, tapi setelah dipikir-pikir...gak jadi saya pasang, untuk sekarang belum perlu, malah jadi kebanyakan kolom templatenya kang jaloe...wekekekeke...

    Kang request tutorial bikin template 3 coloumn jadi 4 coloumn untuk sidebar kang...

    ReplyDelete
  25. @ qittun > bisa aja mas , hanya kayanya jarang blog atau website yang punya 3 sampai 4 kolom, soalnya makan tempat buat main postnya... nanti saya pertimbangkan dulu soalnya pesanan banyak banget /kringet

    ReplyDelete
  26. wahhh.. ini yang aku pengin tp blm sempet soalnya masih mudik. kapan2 aku cobain

    ReplyDelete
  27. udh aku coba kok malah blogku jadi kepotong antar atas dan bawah. Jadi 3 kolomnya itu bukan di header tp di tengah2. gimana ya???

    ReplyDelete
  28. Sipp, dah. Wah, ilmunya banyak nih.
    Hehe...

    ReplyDelete
  29. waaa... bagus ni tutorialnya /koprol

    ReplyDelete
  30. Gak rugi nyasar kemari...banyak ilmunya
    thanks berat lohpak subgya/lari

    ReplyDelete
  31. Bos belom bisa

    ada pesan begini

    "Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: bordercolor"/hehe

    ReplyDelete
  32. Bos/baca
    Tolong diperjelasin lebih detail
    soalnya masih newbie/bisik
    takot salah ganti/hm
    sekalian Bos kalau mau ganti warna backgroundnya , gimana caranya/hihi

    ReplyDelete
  33. Jadi dach di blog gw

    Kang Mochal gitu loch

    Thank banget ya Kang

    ReplyDelete
  34. Tumben belom Bobo Bos

    Ditunggu lloh Bos

    Tips2 selanjutnya

    ReplyDelete
  35. Thanks for this widget...master

    ReplyDelete
  36. #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }

    ada peringatan...?

    Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor


    Solusinya gimana Bos...?

    ReplyDelete
  37. Udah bisa Bos...gw ganti $bordercolor;
    menjadi bordercolor;
    sorry...ya ngerepotin

    ReplyDelete
  38. terima kasih banyak buanget ye booos...!

    ReplyDelete
  39. Maksih..ini baru top cer, beerulang2 kucari buat kolom,, ini yang terbaik buat aQ...

    thanks sobat

    ReplyDelete
  40. huhuhu..
    kok saia gak ketemu main-wrapper nya yaa ?
    saya salah dimana nih gan ?

    saya cobain semua kok salah...

    ReplyDelete
  41. makasih banyak kang, tp ntu lebarnya emang harus disesuaikan dgn lebar main wrapper kita kan?

    ReplyDelete
  42. Terimakasih pa.setelah beberapa search dan coba sana sini...akhirnya saya menemukan tutorial ini dari bapa. dan saya langsung coba..et dah SUKSES pa...
    semoga segala kebaikannya dalam berbagi ilmu mendapatkan balasan yang setimpal kelak Amiin.
    tapi Insya Allah pa kalau yang selalu mengamalkan ilmunya yakin hidupnya akan penuh keberkahan...
    jangan bosen2 ya pa terus berbagi ilmu..bagi kami2 yang pemula ini.

    ReplyDelete
  43. gimana mau bikin kolum di bawah (footer) sepeti di blog kamu ini?

    ReplyDelete
  44. @miss ekin : sudah pernah saya bahas mba untuk membuat kolom di footer

    ReplyDelete
  45. mantap, keren mas. ini yang saya cari-cari

    ReplyDelete
  46. Wah! Baru tahu nih.. Klo Master2 yg jago buat template, ini sih gak masalah ya.. Makasih

    ReplyDelete
  47. Walau belum faham buat edting template, sy numpang cari backlink juga ya di Blog Dofollow ini.. Makasih Kang :D

    ReplyDelete
  48. makasih tutornya mastah..
    ntar dicoba ^_^

    ReplyDelete
  49. thanks banget om,langsung bisa dipraktekkan sekarang juga

    ReplyDelete
  50. waah, patut dicoba nih. gimana ya tapi caranya ?

    ReplyDelete
  51. waaahhh dapet ilmu baru.. asseeeeeekk
    matur nuwun kang

    ReplyDelete