Gambar 3 Kolom di Bawah Header
Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:
Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
Cari kode ]]></b:skin>
Sebelum atau di atas kode ]]>< /b:skin>; letakkan kode di bawah ini:
/* Top Header
---------------------------- */
#topheader {
width:930px;
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;
}
Keterangan:
#topheader adalah kode untuk kolom secara keseluruhan;
#left-topheader adalah kode untuk kolom sebelah kanan;
#center-topheader adalah kode untuk kolom pada posisi tengah;
#right-topheader adalah kode untuk kolom sebelah kiri;
Width: px adalah kode untuk ukuran lebar kolom;
Padding adalah jarak sela antara kolom satu dengan lainnya;
Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
Selanjutnya cari kode di bawah ini:
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Test Blog (Header)" type="Header">
</b:widget>
.
Tepat di bawah kode di atas, tambahkan 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">
</b:section></div>
Simpan Tamplate, selesai.
slamat mencoba!!!
sumber : serba-tersedia
