Cara Membuat 2 (Dua) Kolom di Bawah Header

Pagi sobat blogger….
Nah sekarang kita akan belajar tentang Cara Menambah Elemen di Bawah Header menjadi dua kolom.
Setelah kemarin kita sudah membahas tentang Cara Membuat 1 (Satu) Kolom di Bawah Header rasanya tidak lengkap kalau tanpa tidak membahas cara menambah kolom header menjadi 2 kolom seperti pada judul di atas.
Hal ini hanya semata untuk menyediakan tempat Widget/Aksesoris di tempat kita apalagi ap untuk template sobat yang memiliki fasilitasnya tidak memadai, atau kekurangan tempat. Cara ini insyaAllah akan sedikit banyak membantu sobat Blogger.
Perhatikan gambar berikut :

Cara pembuatan :

• Pertama seperti biasa, Login ke Blog sobat saya sarankan masuk di http://draft.blogger.com/home jangan di www.blogger.com. hehe he.... tapi maslah ya xixix
• kemudian maasuk ke Template " Backup terlebih dulu "
• Pilih Edit HTML >> Lanjutkan >> Cari kode ]]></b:skin> " Tekan Ctrl + f (f3) untuk permudah pencarian " 
• Setelaah ketemu kode di atas, letakkan kode  di bawah ini tepat di atasnya.

#box-main-container {

clear:both;

}

.box-column {

padding:0px 10px 10px 10px;

border:1px dotted $bordercolor;

}

• Sobat bisa mengedit nya sesuai selera.
• lalu belum selesai ni.. cari kode <div id='main-wrapper'> dan letakkan kode dibawah ini di atasnya.

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

<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>

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

</div>

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

</div>

• Selanjutnya simpan Template. dan lihat hasilnya di bagian elemen halaman, jika sobat berhasil maka akan melihat ambah gadget 2 di bawah header seperti pada gambar di atas. 
• Selesai.

Semoga sobat berhasil dan artikel ini bisa bermanfaat buat kamu.

Artikel Terkait: