Selasa, 25 Januari 2011

Menambah 3 kolom di bawah header


Menambah 3 kolom di bawah header akan memudahkan pengunjung dalam memilih artikel jika 3 kolom ini anda manfaatkan sebagai tempat untuk menambah widget daftar isi atau recent post atau bahkan top komentator, ya itu sedikit saran dan manfaat 3 kolom di bawah header ini.

1. Baca: Cara masuk ke dalam template blog
2. Simpan kode di bawah ini di atas kode ]]></b:skin>

/* Top Header */
#topheader {
width:100%;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}
#topheader a:visited {
color:gray;
text-decoration:none;
}
#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}
#topheader ul {
color:#333;
margin:0;
padding:0;
}
#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}
#left-topheader {
width:360px;
float:left;
padding-left:15px;
}
#center-topheader {
width:230px;
float:left;
padding:0 20px;
}
#right-topheader {
width:260px;
float:right;
padding-right:15px;
}

Penjelasan kode


#topheader : adalah kode kolom secara keseluruhan
#left-topheader : adalah kode kolom sebelah kanan
#center-topheader : adalah kode kolom pada posisi tengah
#right-topheader : adalah kode kolom sebelah kiri
Width: : Adalah ukuran lebar kolom
Padding : adalah jarak sela antar kolom

Cari lagi kode seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='disini biasa nama blog anda (Header)' type='Header'/>
</b:section>
</div>

Jika agak kesulitan mencarinya anda cukup tekan F3 atau CTRL + F kemudian Copy kode berwarna biru itu dan paste nanti pasti ketemu kodenya, setelah ketemu anda lihat kode </div> nah di bawah kode tersebut simpan kode di bawah ini

<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>

Setelah itu klik SIMPAN TEMPLATE dan lihat hasilnya di bagian Tata letak, Good Luck.