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; } |
Sekarang kita pasang kode HTML nya
7.Cari kode seperti ini :
<div id='main-wrapper'> |
<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> |
<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...!
0 komentar:
Posting Komentar