4
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.

Poskan Komentar

  1. Kode css-nya diletakan setelah atau sebelum ]]>

    BalasHapus
  2. untuk pembuatan kode CSS bisa diletakkan di 2 tempat..
    Namun pada umunnya di blogger setiap code CSS diletakkan sebelum kode ]]></b:skin> .
    Jika kita ingin meletakkan kodenya setelah kode ]]></b:skin> maka kita harus menambahkan kode pengapit yaitu:
    <style>

    Kode CSS

    </style>

    BalasHapus
  3. mz gmn cara membuat css dengan java skrip dan cara mengatur di blog gmn...

    BalasHapus
  4. terima kasih banyak bwt admin realfa84.blogspot.com cuz sangat amat terbantu saya dalam mengedit template yang sudah saya download dan cara penyampaiannya saya suka cuz mudah dimengerti!! lanjutkan mas bro admin dalam membagi dan berkarya.......maju terus gak mundur-mundur

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top