Cara Membuat Dan Menambah Header Jadi 3 Kolom
Oleh
Pada tulisan yang terdahulu saya pernah menulis tentang " Cara Membagi Dua Kolom Header ", Nah, untuk yang sekarang saya ingin membuat atau membagi kolom header menjadi tiga bagian . Caranya yaitu tinggal menambahkan satu lagi id dan kode css untuk kolom header yang ketiga di bagian header pada tulisan terdahulu, baca disini .
Adapun kode untuk bagian header seperti ini . Ini adalah kode header yang telah di ubah jadi 2 kolom :
#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;
}
Sekarang tinggal menambahkan kolom header yang ke tiga, dibawah kode diatas . Kode kolom header ke 3 yang saya buat seperti ini :
#header-kanan-bawah {
width: 400px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}
#header-kanan-dibawah {
padding: 0 5px 10px;
}
#header-kanan-bawah ul {
margin: 0;
padding: 5px;
}
#header-kanan-bawah ul li {
display: inline;
padding: 5px;
}
Nantinya kode header keseluruhannya akan seperti ini :
#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;
}
header-kanan-bawah {
width: 410px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}
#header-kanan-dibawah {
padding: 0 5px 10px;
}
#header-kanan-bawah ul {
margin: 0;
padding: 5px;
}
#header-kanan-bawah ul li {
display: inline;
padding: 5px;
}
Setelah selesai membuat kode diatas, tinggal membuat kode id pemanggilan untuk kolom header yang ketiga .
Kodenya seperti yang ini :
<div id='header-kanan-bawah'>
<b:section class='header' id='header-kanan-dibawah' showaddelement='yes'>
</b:section>
</div>
Setelah itu cari kode header yang ini, lalu tempatkan kode yang baru dibuat, dibawah kode header yang 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 id='header-kanan-bawah'>
<b:section class='header' id='header-kanan-dibawah' showaddelement='yes'>
</b:section>
</div>
</div>
Setelah selesai jangan lupa klik Simpan Template , supaya perubahan yang terjadi disimpan dan di proses hasilnya oleh mesin blogger .
Baca Juga Ini : " Membagi Dua Kolom Header "
+
1 komentar:
nuhun pisan info nya, mau di contoh yach
Posting Komentar Untuk Artikel Ini :