Cara mengatur layout kolom di blogspot

Pada pembahasan sebelumnya sudah saya jelaskan bagaimana cara membuat kolom baru di blogspot, dan pada tutorial kali ini saya akan membahas bagaimana cara mengatur layout kolom yang sudah kita buat, dan pada dasarnya ini juga berlaku buat kolom yang sudah ada baik itu template dengan layout 2 kolom ataupun sudah menjadi 3 kolom. Trik ini sebenarnya tidak rumit karena kita hanya memindahkan kode div di bagian section 3 (HTML) dan sedikit mengubah margin dan paddingnya apabila tampilan layoutnya bertabrakan dengan element lainnya dan posisi floatnya. Seperti biasa saya masih menggunakan acuan contoh layout template minima dan pada dasarnya tutorial ini bisa berlaku juga pada template yang lainnya.
Perhatikan screenshoot di bawah ini
  • Posisi 2 kolom berada di sebelah kanan main post :



  • Posisi main post di tengah-tengah 2 kolom :

  • Posisi 2 kolom berada di sebelah kiri main post :
 


Untuk masing-masing posisi saya akan jelaskan satu persatu, dan dalam mengubah layout kolom template, sobat blogger tidak perlu mencentang expand widget.
  • Pada posisi 2 kolom di sebelah kanan main post kode pada bagian section 3 (HTML) :

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di bawah div main-wrapper dan akan memberikan tampilan 2 kolom berada di sebelah kanan main post.
  • Pada posisi main post berada di tengah-tengah 2 kolom maka kode pada section 3 (HTML):

 <div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
     <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
   <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 

Perhatikan posisi div main-wrapper di apit oleh kode yang berwarna merah dan akan memberikan tampilan main post berada di tengah 2 kolom.

  • Pada posisi 2 kolom di sebelah kiri main post kode pada bagian section 3 (HTML) : 

<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di atas div main-wrapper, tetapi hal ini belum cukup karena pada bagian section 2 (CSS) perlu di rubah posisi floatnya terutama yang kode sidebar-wrapper menjadi posisi float left karena defaultnya right ,baru akan memberikan tampilan 2 kolom berada di sebelah kiri main post.
Konsep dasar cara mengubah layout kolom adalah :
  1. Posisi div pada bagian section 3 (HTML)
  2. Posisi float, nilai margin dan padding apabila layout kolomnya bertabrakan dengan element lainnya
  3. Trial and error
Semoga dengan tutorial cara mengubah layout kolom sobat blogger akan bisa berkreativitas dengan stylenya masing-masing.

81 comments:

  1. Saya copy dulu Bos buat bahan praktek

    Thanks Master

    ReplyDelete
  2. memang minima merupakan template yang paling mudah untuk dimodifikasi....

    maju terus... pantang mundur

    ReplyDelete
  3. wah saya juga lagi cinta bangt nih sama minima template selain enteng loadingnya cepat juga untuk di pahami ketika edit-mengedit dan tutorial bang subagya sangat membantu sekali buat yang ingin belajar mengedit template..sukses selalu bang :D

    ReplyDelete
  4. Aku percaya Kamu bro....
    Gara2 baca ga jadi petromaxxx...

    ReplyDelete
  5. wahh info bagus nih mas..
    oya bisa nanya ngga nihh??
    dikomentku nama yang kasih koment ngga kliatan..sudah aku cari n ganti di font n color...tapi tetep ngga bisa mas..
    atau harus rubah lewat HTML yah?? gimana caranya ya.....???

    ReplyDelete
  6. jangan asal bermain pimpong..
    salah salah bisa kena mata..
    kang Mochal diacungin jempol dong..
    makin mantab aja tutorialnya..

    ReplyDelete
  7. jangan asal bermain pimpong..
    salah salah bisa kena mata..
    kang Mochal diacungin jempol dong..
    makin mantab aja tutorialnya..

    ReplyDelete
  8. makasi ya bang infone
    keep blogging

    ReplyDelete
  9. Langsung melakukan operasi pak.....

    ReplyDelete
  10. Mantap Mas Mochal
    Mas Kalau mau bikin supaya postingannya seperti magazine yang terbagi bagi gimana mas?
    http://saterlat.blogspot.com

    ReplyDelete
  11. Wekekekekkeke....... aku merasakan kreatifitas mengalir..... huahuahuahua.... thx berat nih mas mochal...... hihihihihi......

    Makin keren aja infonya, hm.. *mikir mengenai hal yang bisa kulakuin dengan ni info.....

    ReplyDelete
  12. Yang paling penting, jangan bereksperimen dengan blog utama! Wkwkwkkwkwkwk....... ntar malah rusak.....

    ReplyDelete
  13. hehehehh.. makyos neh tip na..

    ReplyDelete
  14. Tutorial yang good Buanget Mas Mochal

    Mas Mau tanya kalau mau bikin supaya dipostingan terbagi dua kolom kayak di blog ini gimana ya mas? Kasih Tahu Caranya ya..... Thanks.

    ReplyDelete
  15. Nice post bro. Penjelasan yang sempurna. Templatenya keren abis nih. Sekarang isa liat sempurna pake opera mini baru.wekeke. Penjelasan tentang bikin template magazine kyknya ente aja nih yg nulis. Ane ragu kl nulis sendiri. Tau sendirikan gaya codingan ane kyk gimana. Tar ga da yg ngerti bacanya.wakaka

    ReplyDelete
  16. thank nich kang ilmunya, tak simpan dulu. suatu saat pasti sy pake. :)

    ReplyDelete
  17. Trial and error

    setujuuuuuu hiihihih

    ReplyDelete
  18. manteb nih tutorialnya...
    cuma maen pindah-pindah kode aja yach..
    sok tau gw.. hehehe

    ReplyDelete
  19. lapannam.. yoi...cuman takut gak harmonis [suami istri kaleee] sama konten lama [gak mudeng MODE: ON]

    tabiek
    senoaji

    ReplyDelete
  20. wah patut di coba nech...thank's mas

    ReplyDelete
  21. wah..asyik dapet pencerahan dari sini....keren banget bro...langsung praktek deh sekarang....eh iya..kok template mu ini belom dikasih header bro...

    ReplyDelete
  22. seeeppp kang aku ambil ilmunya yah kang

    ReplyDelete
  23. Waduh.. gak nyambung dah kalo ngedit template, heheeee...

    ReplyDelete
  24. Sip...udach jadi 1 template buatan sendiri

    ini berkat Om Mochal

    Bos Request cara buat Recent coloum seperti simple minima

    ReplyDelete
  25. saya masih merasa aman dan bahagia, jika blog ini masih menyimpan tulisan seperti diatas...

    kekekeke....

    ReplyDelete
  26. dateng, baca2 langsung save halaman ini. soalnya penting buat kita2 yang lagi blajar ngeblog. slam kenal mas...

    ReplyDelete
  27. duh seger euy inponya...di bookmark juga...langsung praktekkkkkkkkkkk

    ReplyDelete
  28. semangkin menjadi - jadi ilmunya si mochal neh...wkwkwkwk

    maknyosss ;)

    ReplyDelete
  29. komplit..plit..plit....

    ReplyDelete
  30. Dibungkus lagi nih chal, biar nanti kalo make blogspot tinggal ngikutin aja, makasih chall ...

    ReplyDelete
  31. walah cuman gitu tho kalo maw buat 3 colom...
    cuman beda di peletakan script untuk side bar
    bener2 baru tau saya ini bang
    membantu banget tapi yang jelas
    glad to be here
    keep post bang
    I will come next time

    ReplyDelete
  32. udah nambah lagi ilmu yang didapat dari kang mochal, tapi apa udah ngerjain PR yah?

    makasih kang, langsung saya simpen dulu nih infonya

    ReplyDelete
  33. Menjenguk mochal dulu, semoga sehat aja

    ReplyDelete
  34. top markotop...kang mochal emang keren info2nya
    hatur nuhun, matur nuwun, makaciiihhhh

    ReplyDelete
  35. emang ada yg lebih top markotop dr Kang Bagya...

    ReplyDelete
  36. makin menarik tipsnya nih bro, napa gak sekalian bikin template aja bro :)

    ReplyDelete
  37. wah makin matabb ae mas ku satu ini hehe
    *ngaku-ngaku*

    ReplyDelete
  38. 今日は
    助かるよ,どうもありがとう

    ReplyDelete
  39. tutornya komplet plet plet om.mohon ijin utk disave dulu.makasih om

    ReplyDelete
  40. wah sekarang rapih banget neh bro leiotnya...wkwkwkwk

    headernya deket search box kaya nyang di templit WP...hehehe...mantafffff...

    ReplyDelete
  41. sepertinya tambah menarik aja tutorialnya bro, terbukti banyak yang terbantu dengan tutorialnya.

    terus berkreasi en sukses selalu bro :)

    ReplyDelete
  42. kalau bisa tinggal copast aja sihh..;)) bis blum ngeh sih. WISH U LUCK...

    ReplyDelete
  43. saya kok nggak cepat paham ya.. maklum umur tidak dapat ditipu.. otak diajak mikir susah banget.
    thanks

    ReplyDelete
  44. mas aku tambah pusing krn setelah saya copy masuk edit HTML, tidak muncul/ditolak. knapa ya mas? tolongin dong bagaimana bagi kolom yg lebih mudah tinggal copy paste. tq

    ReplyDelete
  45. @ achmad > mungkin waktu kopi paste ada yang ketinggalan tag penutupnya seperti div coba perlahan-lahan ulangi lagi.. semoga berhasil

    ReplyDelete
  46. Bagus banget idenya ternyat mudah caranya tapi pasti sulit dipraktekinnya:D

    ReplyDelete
  47. wih... mantab bro tips nya. thx

    ReplyDelete
  48. bosss,,.. thnkz gw udh bsa ngatur template,,,..
    nih alamat nya blog gw,,,... http://adam-hafid.blogspot.com/

    ReplyDelete
  49. bos.. yg posisinya main-nya ditengah, udah gw coba tapi kok tetep aja sodebarnya ada di kanan semua. gimana bos???

    ReplyDelete
  50. makasih mas...bagus buat new bie kaya saya?

    ReplyDelete
  51. wah penting banget nih

    ReplyDelete
  52. Wuihh..kuereen abis postingannya,Thank's saya juga lagi nyari postingan seperti ini..
    Mau tanya kalau mau memperlebar header gimana ya..??

    ReplyDelete
  53. Woah ternyata memang bisa toh.. saya selama ini bingung liat blog orang kok bisa bagus tampilannya.

    Thanks ya

    ReplyDelete
  54. bro aq coba buat ngatur lebar kolom tapi gak tau, ada saran gak bro? cz tampilannya agak kecil n aq pake yang 3 kolom mau ngatur lebar tiap kolomnya supaya lebih besar gimana bro?thx b4

    ReplyDelete
  55. @ deo : tinggal ubah id headernya bro sesuai dengan keinginan kita tapi di sesuaikan dengan outer wrpper juga
    @my blog : kasih alamat urlnya bro ke email ane mau lihat codenya

    ReplyDelete
  56. kolom di blog saya sekarang sidebarnya berada dikanan, nah sewaktu masuk kepostingan saya mau sidebarnya berada di kanan kiri post, bisa kasih tahu caranya gimana????

    ReplyDelete
  57. @rudy : di buat model magazine kang dengan cara menghide kolom kanan kiri tersebut di homepage

    ReplyDelete
  58. tempalte blogku jadi aneh, semua widget yang ada di sidebar kiri dan kanan jadi turun semua ke bawah.. knapa y..?
    ada yang tau dan bisa kasih solusi..?

    ReplyDelete
  59. infonya bagus mas..
    oya bisa nanya ngga nihh...........
    Apa scripnya di kopy semuanya di HTML.mohon sosulinya...........

    ReplyDelete
  60. thanks tipsnya boss.. langsung dipraktekin nih

    ReplyDelete
  61. nice info bos... saya masih newbie n mau tanya dong cara rubah link, maksudnya kalau di liat d blog saya kalau mau berubah "FAQ", "CONTACT" dan "HOW TO BUY" biar ngelink ke tempat yg saya mau gmn ya jd jgn ngelink ke home... THanks b4

    ReplyDelete
  62. Saya Coba, tapi kolom postingnya tidak pindah tempat. Tolong bantu saya ...

    ReplyDelete
  63. @flo : ubah di edit html kang dengan menggunakan kode anchor link arahkan ke url blog akang
    @rizal : coba atur posisi float pada section css, trus lihat niai margin dan padding

    ReplyDelete
  64. makasih tutorialnya ...

    utak atik dulu neh ....

    semoga aja berhasil ...

    ReplyDelete
  65. mantap bos,tapi bagaimana kalo kolom di atas posting tolong infonya

    ReplyDelete
  66. tutorialnya mantab2 sob,.., lanjutkah,.. :D

    ReplyDelete
  67. Tutorialnya sangat bermanfa'at.
    Tinggal praktekin semoga bisa.

    ReplyDelete
  68. Nice tutorial, tinggal praktek.
    Thanks ya.

    ReplyDelete
  69. Thanks buat triknya..sekarang template ane bisa tiga kolom..lumayan buat tempat iklan..

    ReplyDelete
  70. wah keren gan,, thanks infonya

    ReplyDelete