Jumat, 21 Desember 2012

Posted by Unknown
No comments | 00.22

1. login ke blog kamu --> Layout --> Edit HTML
2. Untuk berjaga-jaga bila nanti ada kesalahan dalam proses edit HTML, download dulu template awalnya.

cari kode ]]></b:skin> dan letakan kode berikut tepat diatasnya :
/* KolomAtas2
—————————- */

#kolomatas2 {
width: 860px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}

#kolomatas2 h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#kolomatas2 ul {
padding: 0;
margin: 0;
}

#kolomatas2 ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #031c5d; */
}

#kolomatas2 ul li a {
display: block;
padding: 0 10px;
text-decoration: none;

}
#kolomatas2 ul li a:hover {
background: #B1ACB1;
}

#left-kolomatas2 { /* yang ini nih kode kolom kiri */
width: 500px;
float: left;
padding-left:15px;
}

#right-kolomatas2 { /* kalo yg ini kode kolom kanan */
width: 340px;
float: left;
padding: 0 5px 0 15px;
}

Catatan :
Nama baris kodenya tidak diganti, yaitu kolomatas, seperti aslinya, hanya saja ditambahi angka 2, jadi kolomatas2, agar berbeda dengan nama baris kode yang digunakan untuk membuat 2 kolom dibawah header.

Baris kode yang ditandai dengan warna merah yaitu 860px itu adalah lebar kolom keseluruhan, dan ini bisa dirubah disesuaikan dengan lebar kolom masing-masing template; begitu juga dengan lebar kolom kiri500px dan lebar kolom kanan 340px bisa disesuaikan dengan keinginan masing-masing. Jarak/padding page elemen nya juga bisa disesuaikan.

sekarang cari kode seperti dibawah ini
</div> <!-- end content-wrapper -->

dan letakan kode dibawah ini tepat berada dibawah kode tersebut
<div id='kolomatas2'>
<b:section class='kolomatas2' id='left-kolomatas2'>
</b:section>
<b:section class='kolomatas2' id='right-kolomatas2'>
</b:section>
</div>

simpan template, kemudian lihat hasilnya dibagian page elemen

sumber:http://bang-nami.blogspot.com/2009/04/membuat-2-kolom-page-elemen-di-bawah.html

0 komentar:

Posting Komentar

Text Widget

Unordered List