Cara Membagi Dua Kolom Header Blog
Oleh
Selain dibagian sidebar penambahan kolom juga bisa di buat untuk bagian header . Seperti untuk penambahan kolom di bagian sidebar seperti yang telah saya tulis disini " Cara Menambah Dan Membagi Dua Kolom Sidebar ", penambahan kolom di bagian header ini juga mempunyai banyak fungsi, selain bisa ditambahkan berbagai gadget atau widget, juga dibagian header ini banyak dipasang untuk pemasangan banner iklan . Sedangkan header yang satunya tetap sebagai tempat untuk judul Title Blog .
Sama dengan langkah untuk membuat 2 kolom sidebar, untuk menambah atau membagi 2 kolom header yang pertama harus di cari adalah kode css untuk kolom header . Seperti pada tulisan sebelumnya kode, yang diambil adalah kode css dari template Minima . Kodenya seperti ini , ini adalah kode header yang telah di ubah lebarnya seperti telah di tulis disini " Menambah Lebar Kolom Header " , sedangkan pada bagian id header ditambahkan property width dengan nilai 510px dan propety float dengan value left, yang diwarnai kuning .
#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
width : 510px;
float : left ;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Setelah ketemu kode seperti diatas, sekarang buat kode css untuk kolom header kedua. Nantinya kolom header ke dua ini akan di tempatkan di sebelah kanan sekalian ditambah dengan tag <li> dan tag <ul>, maka kodenya saya buat seperti ini :
#header-kanan{
width:420px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
float:right;
}
#header-kanan-atas {
padding:0 5px 10px
}
#header-kanan ul {
margin: 0;
padding: 5px;
}
#header-kanan ul li {
display: inline;
padding: 5px;
}
Keseluruhan kode nya nanti seperti dibawah ini, tapi terlebih dahulu saya hapus kode id untuk header description.
#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
width : 510px;
float : left ;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header-kanan{
width:420px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
float:right;
}
#header-kanan-atas {
padding:0 5px 10px
}
#header-kanan ul {
margin: 0;
padding: 5px;
}
#header-kanan ul li {
display: inline;
padding: 5px;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Setelah itu dalam html harus di buat id untuk pemanggilan kode kolom header ke dua tadi, caranya cari dulu kode header yang pertama seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog mu (Header)' type='Header'/>
</b:section>
</div>
Kemudian buat id pemanggilan untuk header kedua seperti dibawah ini , nanti simpannya di bawah </b:section> kode header yang pertama :
<div id='header-kanan'>
<b:section class='header' id='header-kanan-atas' showaddelement='yes'>
</b:section>
</div>
Nantinya keseluruhan kode id pemanggilan dalam html jadi seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog mu (Header)' type='Header'/>
</b:section>
<div id='header-kanan'>
<b:section class='header' id='header-kanan-atas' showaddelement='yes'>
</b:section>
</div>
</div>
Setelah selesai semuanya, tinggal klik Simpan Template , supaya perubahan yang dilakukan disimpan dan di proses oleh mesin Blogger .
Baca Juga Ini :" Membagi Tiga Kolom Header "
+
Ada 0 komentar Untuk: Cara Membagi Dua Kolom Header Blog
Posting Komentar Untuk Artikel Ini :