Bedah Template Minima : Bedah Header

Selamat sore sahabat blogger, semoga selalu dalam keadaan sehat dan bahagia.Pada postingan kali ini kita akan belajar membagi header menjadi dua bagian. Tapi sebelumnya saya perlu ingatkan, postingan ini adalah lanjutan dari postingan sebelumnya, jadi sobat blogger perlu juga membaca postingan tersebut agar bisa nyambung dengan postingan ini. Oke?

Bagaimanakah Caranya?

Ikuti Langkah berikut untuk membelah header menjadi dua kolom.

1. Masuklah ke akun blogger Anda


2. Klik Rancangan pada Dasbor Anda


3. klik tab Edit HTML



4. Cari kode CSS berikut ini :




/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
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;
}




5. Gantilah kode tersebut dengan kode CSS di bawah ini :




/* Head */
#headerx{background:#A30000;width:1000px;margin:0 auto;height:100px;color:#333366;}
#lhead {width:480px;float:left;padding-left:14px;}
#rhead {width:480px;float:right;padding-top:10px;}
.description {padding-left:14px;padding-top:0;Color:#A30000;}




6. Kemudian cari kode berikut ini :




<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="testings (Header)" type="Header">
</b:widget>
</b:section></div>





7. Ganti kode diatas dengan kode di bawah ini :




<div id="headerx">
<div id="lhead">
<b:section class="lhead" id="lhead" showaddelement="yes">
<b:widget id='Header1' locked='true' title='testings (Header)' type='Header'/>
</b:widget>
</b:section></div>
<div id="rhead">
<b:section class="rhead" id="rhead" showaddelement="yes">
</b:section></div>

</div>

Semoga berhasil, sekian dahulu, terimakasih kawan.