Home » , » MEMBUAT DUA ATAU TIGA KOLOM DI BAWAH HEADER

MEMBUAT DUA ATAU TIGA KOLOM DI BAWAH HEADER

Meletakkan  asesoris baik berupa  tulisan atau gambar di bawah header memang cara yang paling tepat untuk menarik perhatian pembaca.
Agar tampak lebih indah dan menarik sebaiknya kita buat dua atau tiga kolom.Sebagi contoh saya sajikan gambar letak gadget dua dan tiga kolom di bawah header.














Tertarik untuk membuat..?
Begini caranya :
1.Masuk Blogger dengan ID anda
2.Klik Tata Letak
3.Klik submenu Edit HTML
4.Centang kotak kecil di pojok kanan atas samping Expand Template Widget,tunggu proses loading selesai.
5.Cari kode seperti ini :
     ]]></b:skin>
6. Copy Paste kode di bawah ini tepat di atas kode    ]]></b:skin>


#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
Itu tadi adalah langkah untuk memasang kode CSS,silahkan edit border.padding dan jenis garisnya.
Sekarang kita pasang kode HTML nya
7.Cari kode seperti ini :


<div id='main-wrapper'>
8.A.Letakkan kode berikut di atas kode tadi.( untuk dua kolom di bawah header )


<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>
8.B.Letakkan kode berikut di atas kode tadi.( untuk tiga kolom di bawah header )


<div id='box-main-container'>
<div id='box1' style='width: 30%; 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: 40%; 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: 30%; 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>

9.Simpan Template
Untuk melihat hasilnya klik Elemen Laman

Jangan lupa berikan komentar nya...!
Bagikan artikel via :

0 komentar:

Posting Komentar

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. PRAPATAN KERTEK - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger