Cara Membuat 2 Kolom Elemen di bawah Header

Cara Membuat 2 Kolom Elemen di bawah Header - Menambahkan 2 Kolom Elemen dibawah header mungkin adalah salah satu cara untuk menambah tempat untuk kita meletakkan gadget. Saya sendiri telah mempraktekannya, hasilnya lumayan juga, tapi ada bagian yang tidak memuaskan, makannya saya menambahkan sedikit CSS. Contohnya sobat bisa lihat gambar dibawah ini :

 

Berikut Tutorialnya :

1. Login ke Account Blogger sobat

2. Pilih Dasbor, lalu Rancangan

3. Klik Edit HTML > Centang "Expand Template Widget"

4. Cari kode ]]></b:skin> (Tekan Ctrl+f untuk mempermudah pencarian kodenya)

5. Copy kode dibawah ini tepat diatas kode ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

6. Cari kode  <div id='main-wrapper'>, bila sudah Copy kode berikut tepat diatasnya

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

7. Klik Simpan Template. dan lihat hasilnya :D

 

Share this post