Membuat Header Yang Menarik

Kali ini aku akan kongsikan cara-cara untuk membuat header macam blog ini. (header blog ni hampaeh jek!) hahahha..

Ok.. header seperti blog aku ni, layout dia korang boleh tengok gambar di bawah.



Cara-caranya ialah:-

1) Klik Template>Edit HTML. Pastikan korang save dulu template asal korang.
2) Cari kod seperti di bawah:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
</b:section>
</div>

3) Tukarkan kesemua kod di atas dengan ko di bawah:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right-top' showaddelement='yes'>
</b:section>
</div>
<div id='header-right-bottom'>
<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
</b:section>
</div>
</div>

4) Kemudian cari kod yang ini pulak:-

#header-wrapper {
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

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

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

4) Tukarkan kesemua kod di atas dengan kod di bawah:-

#header-wrapper {
width: 950px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

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

#header {
width: 500px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-right {
width: 400px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}
#header-right-top {
padding: 0 5px 10px;
}

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right ul {
margin: 0;
padding: 5px;
}

#header-right ul li {
display: inline;
padding: 5px;
}

#header-right-bottom {
width: 400px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

#header-right-bottom ul li {
display: inline;
padding: 5px;
}

Ok save dan tengok layout blog korang.. mesti dah jadi mcm dlm gambar.

p/s: korang boleh masukkan elemen apa yang korang suka

Enjoy..