Cara membuat dan membagi Kolom dengan CSS di blogspot

Setelah tahu sedikit bagian-bagian blog dan cara agar lebih mudah melihat hasil design yang kita lakukan, sekarang kita akan mulai belajar mengotak-atik alias mendesign template blog sendiri. Pada dasarnya semua website ataupun blog adalah sekumpulan table atau kolom. Oleh sebab itu, hal yang paling awal yang akan kita pelajari adalah Cara membuat dan membagi sebuah kolom.

Langsung saja kita coba ke contoh-contohnya.

Cara Pembuatan/Menambah 1 kolom dibawah header.
Untuk pembuatan 1 kolom ini sangatlah mudah. Bahkan kita bisa saja membuatnya tanpa code CSS sama sekali. Misalkan kita ingin membuat 1 kolom dibawah header maka pertama kita tinggal cari kode yang mirip seperti ini:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
<b:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

Kemudian kita tinggal membuat atau menambahkan sedikit kode HTML seperti dibawah ini.

<div id="kolom-baru">
<b:section class='header' id='kolom-baru' preferred='yes'/>
</div>

Namun tentu saja hasilnya kadang kurang sesuai dengan yang kita inginkan. Misalkan kita ingin kolom tersebut mempunyai border tipis warna hitam. Maka kita yang selanjutnya cari kode ]]></b:skin> dan letakkan kode CSS seperti ini.

#kolom-baru{
border: solid 1px black; /*--Warna Border--*/
width:100%; /*--lebar kolom baru--*/
}

Cara Pembuatan/Menambah/membagi kolom dibawah header.
Berbeda halnya dengan pembuatan 2 kolom atau lebih. Untuk pembuatannya maka kita harus membuat dan menentukan ukuran lebar bahkan terkadang tinggi dari kolom yang ingin kita bagi. Untuk ukuran penentu lebar atau tinggi ini kita bisa menggunakan ukuran %, Pixel, em, atau yang lain.

Pertama kita buat kode HTML nya terlebih dahulu. Tempat peletakannya sama dengan pembuatan 1 kolom.

<div id='kolom-baru'>
<div id='kolom-baru1'>
<b:section class='kolom-baru1' id='kolom-baru1' preferred='yes'/>
</div>
<div id='kolom-baru2'>
<b:section class='kolom-baru2' id='kolom-baru2' preferred='yes'/>
</div>
</div>

Kemudian tambahkan juga kode CSS nya

#kolom-baru{
border: solid 1px black; /*--Warna Border--*/
width:100%; /*--lebar kolom baru--*/

#kolom-baru1{
width: 49%; /*--lebar kolom baru1--*/
float: left; 
}
#kolom-baru2{
width: 49%; /*--lebar kolom baru2--*/
float: right; 
}

Demikian juga dengan pembagian kolom menjadi 3 dan 4 atau bahkan 5 kolom. Yang paling utama adalah menentukan lebar atau tinggi area yang ingin kita bagi. Hal ini juga berlaku sama dengan jika kita ingin membuat/menambah/membagi kolom di yang lain. Entah itu diatas header, dibawah header, di atas footer, atau pun yang lain.

Dan ingat..!!! Setiap browser itu memiliki sifat atau kemampuan yang berbeda dalam pembacaan kode. Perbedaan 1px saja bisa menyebabkan blog yang terlihat rapi di google chrome, tapi bisa saja terlihat hancur di mozilla firefox. Oleh sebab itu, selalu cek hasil akhirnya dan pastikan tidak ada masalah walau diakses lewat browser manapun.

Share this post