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 kiriWidth:
: Adalah ukuran lebar kolomPadding
: adalah jarak sela antar kolomCari 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.