Trik Membuat Blog 3 Kolom, Kolom Posting di Tengah

blog tricks, blog tips, tutorial blog, free download blog templates, tips trik blog Sebenarnya, kita pernah membahas tricks membuat blog menjadi 3 kolom. Hasil dari trik membuat blog menjadi 3 kolom sebelumnya, masih menghasilkan blog 3 kolom dengan postingan disebelah kiri.

Sekarang, Ayas mau kasi trik blog menjadi 3 kolom dengan kolom postingan ditengah, diantara 2 sidebar. Hasilnya akan seperti blog ini.

Yuk kita pelajari bareng trik membuat blog menjadi 3 kolom dengan kolom postingan ditengah...


Pertama, sedikit Ayas jelasin tentang layout blog secara umum (standart), sekilas bisa dilihat seperti gambar dibawah ini, beserta penjelasannya :


  • Yang berwarna putih adalah 'Body'
  • Berwarna kuning, disebut dengan 'outer-wrapper'
  • Warna biru adalah 'Header'
  • Warna merah adalah 'Main-wrapper', tempat postingan kita berada.
  • Warna hijau adalah 'Sidebar'
  • Terakhir, warna hitam adalah footer

Mari mulai mengedit. Silahkan menuju halaman 'Tata Letak' - 'Edit HTML'.

Yang pertama harus kita lakukan adalah mendownload template Sodara, agar jika terjadi kesalahan masih bisa di kembalikan seperti semula. Cara untuk mendownload/backup template bisa Sodara baca disini.

Sebelum kita membuat blog kita menjadi 3 kolom, kita harus tau dulu berapa lebar keseluruhan Outer-wrapper, karena outer-wrapper adalah tempat dimana main-wrapper (kolom postingan) dan sidebar berada.

Untuk mengetahui berapa lebar outer-wrapper, cari kode berikut (biasanya seperti ini) :

#outer-wrapper

Dibawahnya ada detail tentang outer-wrapper itu, misalkan :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Nah, width adalah lebar keseluruhan outer-wrapper. Width outer-wrapper inilah yang akan kita jadikan dasar untuk menentukan ukuran masing 2 sidebar dan kolom postingan.

Jika terlalu kecil, silahkan ubah width nya, misalkan kita ganti dengan 900px.

Jangan lupa juga untuk menyesuaikan lebar header dan footer agar sama, ganti dengan 900px juga.

Selanjutnya, karena kita akan membuat 3 kolom - kolom posting dan 2 kolom sidebar - maka kita bagi 900px untuk 3 kolom tersebut.

Misalkan, kita coba bagi 450px untuk kolom posting, 200px untuk masing-masing 2 kolom sidebar kita. Sisanya, 50px kita sediakan untuk jarak antar kolom.

Langkah selanjutnya adalah mengganti lebar masing2 kolom.

1. Kolom Posting

Cari kode :

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ganti widthnya dengan 450px.

2. Kolom sidebar
Cari kode :

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ganti width dengan 200px

Nah, sekarang waktunya untuk menambah 1 element untuk sidebar baru kita.

Caranya, tinggal copy kode berikut, lalu paste di atas kode #main-wrapper :

#sidebar2-wrapper {
width: 200px;
float: left;
margin-right:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Pemberian angka '2' untuk membedakan dengan sidebar yang sudah ada.

Selanjutnya, copy kode berikut :

<div id='sidebar2-wrapper'>

<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>

</div>


Kemudian paste di ATAS kode :

<div id='main-wrapper'>

Coba save, lalu pindah ke halaman 'Tata Letak' / 'Layout' - 'Element Halaman' / 'Page Element'.

Sekarang Sodara bisa lihat, sudah ada 1 element halaman baru tercipta. Coba isi element halaman baru tersebut dengan text ato logo (klik aja 'Add Gadget' / 'Tambah Gadget'), misalnya. Kemudian save, lalu preview.

Nah, bisa kita lihat hasilnya.

Sudah jadikan blog 3 kolom dengan kolom postingan berada ditengah, diantara 2 sidebar?

Jika trick membuat blog menjadi 3 kolom dengan kolom posting ditengah ini masih belum jelas atau belum berhasil, silahkan tanya di comment aja.. Insya Allah Ayas bantu..

Happy Blogging!!

36 comments:

  1. Asskum..wah lum bisa ni mas?ada pencerahan dong pasti?

    ReplyDelete
  2. klo boleh tau, g bisanya kenapa? apa ada eror?

    ReplyDelete
  3. wow... thanks bro... blognya jadi kliatan lega...

    ReplyDelete
  4. waduuh.... ada yang lebih gampang gak...

    ReplyDelete
  5. mas bisa pindahkan kolom postingan saya ketengah gak???coba dong dilihat...susah aku utak atik

    ReplyDelete
  6. Akhirnya berhasil juga...
    Pertamax bro, makasih ataz ilmunya...

    Mursidi(baru belajar ngeblog)

    ReplyDelete
  7. Maturnuwun infonya.
    Cuman punyaku kok bukan postingan tengah jadinya.
    Malahan sidebar dua-duanya ada di pinggir kabeh.
    Gimana ya?

    ReplyDelete
  8. @imam Sebenarnya, inti dari trick ini mudah :

    Kode tata letak widget
    -sidebar1 dengan letak left, main left, dan sidebar2 right

    Peletakan kode widget
    seperti yang sudah dijelaskan diatas, peletakan kode widget harus berurutan sbb:
    sidebar1(left), main(left), baru kemudian sidebar2(right).

    Mungkin main widget tidak berada ditengah dikarenakan ada kekeliruan tersebut.

    Semoga membantu..

    ReplyDelete
  9. thanks ............

    software full
    http://andik-eternal.blogspot.com

    ReplyDelete
  10. Trimakasih infonya blogku sukses menjadi 3 kolom sesuai dengan yang di intruksikan. http://m4sukses.blogspot.com/

    ReplyDelete
  11. eh ini kok aku udh masukin semuanya, udh ada 3 kolom tapi posting blognya g bisa di tengah. padahal kodenya udh dipaste diatas main wrapper. plis ya butuh pencerahan

    ReplyDelete
  12. mas ayas, kok tetep ga' bs ya kolom posting di taro di tengah..

    ReplyDelete
  13. mas kalo punya saya gimana??? tolong di cek ya mas

    ReplyDelete
  14. ..thank you abis...> berhasil, pi ko kotak posting agak kekiri..biar sama persis tengah2 gimana ya...

    ReplyDelete
  15. hahahaaa...
    jadinya aneh, memang jadi 3 + ditengah-tengah.
    Tapi sidebar2 ada di atas, postingan ada ditengah,
    sidebar1 ada di bawah postingan.
    apa yg salah ya....???
    mataku dah pedes nich...
    tolong bantuannya

    ReplyDelete
  16. Mas, punya saya juga kok postnya ada di samping kanan, dan dua sidebarnya ada di sebelah kiri..

    Mohon bantuannya...
    TErima kasih...
    http://jw17.blogspot.com

    ReplyDelete
  17. mantap dari semu7a blog yang saya kunjungi untuk belajar.

    andalah salah satu yang mantap... terima kasih atas ulasannya

    salam
    http://slasheric.blogspot.com

    ReplyDelete
  18. Loh... Kok jadi aneh... Satu sidebar diatas, posting ditengah, satusidebar lagi di bawah posting.... Gimana tu????

    ReplyDelete
  19. @revo coba cek :

    1. Urutan masing2 bagian (Side1 - Posting - Side2)
    2. Ukuran masing2 kolom, mungkin terlalu lebar

    Selamat mencoba :)

    ReplyDelete
  20. kalo punya saya , saya lihat di elemen/tata letak jadi.... tapi saya lihta blog ko' ga' jadi/g' ada...knpa ya?

    ReplyDelete
  21. Makasih infonya. Saya praktekin ya. Salam persahabatan.

    ReplyDelete
  22. Terima kasih atas informasi ..... Saya sedang mencari informasi seperti ini.

    ReplyDelete
  23. info yang menarik....minta ijin mraktekkan y?salam kenal.......

    ReplyDelete
  24. makasih artikel'a broo .. smoga brmanfaat ..
    sukses slalu ..

    ReplyDelete
  25. Bang , klau punya saya gak ad kode ini
    #main-wrapper{
    #sidebar-wrapper {
    #sidebar2-wrapper {

    Mohon bimbingan nya bang :)

    ReplyDelete
  26. gan, kenapa code yang di atas t gak ada di HTML ane ya? trimakasih

    ReplyDelete
  27. rumit gan, mampir ya http://aldiinzaghi.blogspot.com/

    ReplyDelete
  28. tolong bantu gan, ane mau bikin tampilan postingan blog ane jadi tiga atau empat, mirip template tema2 photografi/videotube gitu gan,,

    gimana caranya gan?

    ini blog ane, http://herbamurah.blogspot.com/

    ReplyDelete
  29. akhirnya nemu juga caranya disini, mksih byk mas, artikelnya bagus....

    ReplyDelete
  30. tankyu,,artikelnya sangat membantu

    ReplyDelete
  31. gan cari buat cursor nya bergambar gmana y...??
    bagi tau dong :)

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz