Menambah Kolom atau Multi kolom

Dec 3, 2007

Menarik sekali tutorial tentang menambah kolom yang di tulis oleh kang Rohman dalam blognya Kolom-Tutorial. Saya sangat menyukainya.
Namun untuk menambah kolom widebar atau multi kolom , seperti gambar di bawah. trik yang di gunakan untuk blog saya ini berbeda dengan cara yang di lakukan kang Rohman.

trik menambah kolom widebar di atas  berlaku  jika kita telah memiliki dua sidebar dalam float yang sama, misalkan keduanya di sisi kanan atau keduanya di sisi kiri.

Bagimana caranya ?

Langkah pertama di atas kedua code Css sidebar kita, masukan kode ini.  

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ }


#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */ }

nilai width sesuaikan dengan kedua sidebar yang telah kita miliki, jika kedua sidebarnya bernilai sama yakni 20%, maka nilai width widebar-wrapper nya 40%. dan ini berlaku juga jika kita mengunakan nilai pixel.
begitu juga untuk nilai Float-nya, apakah sisi kanan atau kiri. Dan terkadang kita pun perlu menyesuiakan nilai marginnya di setiap kolom, karena penambahan kolom widebar ini.

Setelah itu masukan  kode ini

<div id='widebar-wrapper'> <b:section class='sidebar' id='widebar' preferred='yes'> </b:section></div>

Simpan dan letakan di atas kode ini 

<div id='main-wrapper'>

setelah itu SIMPAN TEMPLATE dan lihat hasil penambahannya di Halaman Elemen.

Jika belum jelas anda bisa mengunjungi bloggeruniversity, sebagai sumber aslinya, pada label Css/Html tentang Widebar.

Menambah Dua Widebar.

Sekarang bagaimana jika kita ingin menambah kolom widebarnya atau Sidebarnya  seperti  gambar di bawah ?

 

Secara logika dan saya praktekan langsung dengan cara dan kode dari bloggeruniversity, berikut perubahan kecil pada css-nya dan menambahkan html-nya di bawan <div id='main-wrapper'> itu memang bisa.

Namun saya lebih tertarik dengan cara yang dilakukan oleh BloggerBuster.com dalam penambahan widebar atau Sidebar-Wrapper jenis ini.

Caranya ?  donlot  dulu Free Template Girly Web 2.0 di sini. Setelah itu buat blog baru  dengan layout template Girly Web 2.0 ini. tujuannya untuk kita bedah dan pelajari  isinya.

Setelah terinstall, kemudian cari dan pelajari kode ini.

#sidebar-wrapper { background: #f9e0e0
url(http://templates.bloggerbuster.com/girly_web_20/sidebar-bottom.gif) bottom left no-repeat;
width: 35%;
padding: 10px;
margin: 2px 0;
float: right;
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 */
}


#sidebar-wrapper2 {
border-left: 1px solid $bordercolor;
width: 35%;
padding: 0 10px;
float: right;
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 */
}


#sidebar-wrapper3 {
border-left: 1px solid $bordercolor;
width: 35%;
padding: 0 10px;
float: right;
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 */
}


#sidebar-twocol-left {
float: left;
width: 155px;
margin-right: 10px;
}


#sidebar-twocol-right {
float: left;
width: 155px;
margin-left: 5px;
}

Jika sudah merasa paham dan ngerti maksudnya, coba kita terapkan ke dalam blog kita. dan harus di ingat variable border colornya yakni $bordercolor. karena setiap penyedia template bisa berbeda-beda dalam menamai variable. dan tentu saja sesuaiankan juga lebar dan margin pada blog kita. begitu juga dengan selector atau penamaan  sidebar h2, sidebar a, a:hover, sidebar ul, sidebar li. dst. Jika kita mengatur nilai dan propertinya  berbeda antara sidebar yang satu dengan lainnya. 

Jika sudah beres kita mengatur dan mensetting Css-nya, sekarang dalam template Girly Web 2.0 kita cari kode Html di bawah, pelajari maksudnya, jika sudah paham masukan dan ganti ke dalam blog kita.

<div id='main-sidebar-wrapper'>
<div class='snap_noshots' id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>


<b:section class='sidebar' id='sidebar-twocol-left' preferred='yes'>
</b:section>


<b:section class='sidebar' id='sidebar-twocol-right' preferred='yes'>
</b:section>


<div style='clear:both;'/>


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


</div>


<div style='clear:both;'/>


</div>


<!--End Main Sidebar Wrapper -->
<div style='clear:both;'/>

Opssss ! terkadang ketika kita menerapkan kode di atas ada pesan peringatan bahwa kodenya tidak di tutup dengan benar seperti tag penutup ini </div>. Solusinya tambahkan saja tag penutup tersebut di samping tag </div> kode sidebar-wrapper terakhir . atau terkadang perlu kerja keras juga Bung !

Kolom Yang Sama Tinggi.

Tentang masalah ini, sebenarnya merupakan tulisan lama dari blog Didas, yang kemudian di pertajam lagi oleh kang Rohman. Akan tetapi itu juga mesti di sesuai dengan kebutuhan pada layout kita, kalau bagi blog saya sendiri seh dengan menambah javascript kolom sama tinggi, akan keliatan menjadi layout yang kaku.

Halaman Elemen Yang Berantakan.

Mungkin kita berhasil menambah widebar kolom ke dalam blog kita, namun ketika kita membukanya dalam Halaman Elemen, terkadang kita mendapatinya berantakan dan  posisinya kacau, maklum kita kan sama-sama orang otodidac, yang terpasak harus paham karena memilki blog .

Namun lagi-lagi saya harus acungi jembol dengan template yang di buat oleh BloggerBuster ini. ternyata untuk urusan tata letak Halaman Elemen, kendali dan solusinya ada pada kode ini. ( cari pada barisan kode Css terakhir dan pahami strukturnya ).

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
body#layout #header-wrapper {
width: 700px;
}
body#layout #outer-wrapper {
width: 700px;
}
body#layout #footer {
width: 700px;
}
body#layout #footer2 {
width: 200px;
}
body#layout #footer3 {
width: 200px;
}
body#layout #footer4 {
width: 200px;
}
body#layout #sidebar-wrapper {
width: 350px;
}
body#layout #sidebar2 {
width: 350px;
}
body#layout #sidebar-two {
width: 350px;
}
body#layout #main-sidebar-wrapper {
width: 350px;
float:left;
}
body#layout #sidebar-twocol-left {
width: 150px;
float:left;
}
body#layout #sidebar-twocol-right {
width: 150px;
float:right;
}
body#layout #main-wrapper {
width: 300px;
float:left;
}
body#layout #crosscol-wrapper {
width: 700px;
}
body#layout #footer-bottom {
width: 700px;
}

Dengan mengetahui logika struktur kode di atas, sekarang kendali tentang Template di new Blogger ada pada kita.

Bagaimana dengan menambah kolom di bagian Footer ?
Saran saya kalau udah ngerti dengan logika di atas, donlot saja Template di BlogandWeb yang multi kolom pd bagian Footer-nya.
Satu hal yang perlu di ingat dalam penambahan kolom, salah satu kuncinya jangan menandai kotak kecil di samping Expand Template Widget. karena dengan cara demikian kode Html-nya akan keliatan Simple.  

Technorati tags: ,