Membagi Elemen di Bawah Header Membagi Elemen di Bawah Header

Membuat atau Membagi Elemen di Bawah Header - Pada postingan yang lalu saya telah membahas tentang cara membuat atau membagi footer di blog, dan kali ini akan saya bahas sedikit tutorial tentang cara membuat atau membagi elemen di bawah header. Tujuan utamnya adalah agar kita bisa menambahkan lebih banyak lagi gadget-gadget yang bermanfaat pada blog kita, karena denganmembuat atau membagi elemen di bawah header blog kita, maka akan tersedia tempat atau ruang yang cukup memenuhi.


Selain itu, kita juga bisa membuat atau membagi elemen di bawah header blog kita untuk menaruh hal-hal yang berbau advertisement (iklan). Sehingga akan memperbanyak space (ruang) untuk kita menaruh banner iklan tersebut. Dan berikut adalah langkah-langkah untuk membuat atau membagi elemen di bawah header blog menjadi 3 kolom :

1. Masuk ke blogger.com menggunakan akun anda.
2. Menuju ke halaman "Template".

3.  Kemudian pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Lalu cari kode ]]></b:skin>  (gunakan tombol ctrl+f untuk mempermudah mencarinya) dan letakkan script kode berikut ini tepat di atasnya : 

#box-main-container {

clear:both;

}




.box-column {

padding:0px 10px 10px 10px;

border:1px dotted $bordercolor;
}

5. Selanjutnya cari kode <div id='main-wrapper'> atau kode <div id="main-outer">.

6. Setelah itu letakkan script kode berikut ini di atas kode <div id='main-wrapper'> atau kode <div id="main-outer"> tersebut. 

<div id='box-main-container'>

<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='box2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'> <b:section class='box-column' id='col3' preferred='yes' style='float:right;'/> </div>

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

</div>

7. Klik save/simpan template, dan selesai...

Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat atau membagi elemen di bawah header blog. Semoga bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kekurangan atau kesalahan yang ada