Kira kira seperti ini kode header secara keseluruhan.
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )
color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont; ( jenis font dari judul blog )
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )
}
#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; ( jenis font dari deskripsi blog )
color: $descriptioncolor; ( warna dari deskripsi blog )
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
- kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
- kode berwarna ungu adalah kode untuk judul blog.
- kode berwarna merah adalah kode untuk deskripsi blog
- kode berwarna hijau adalah kode untuk efek hover pada judul blog
- kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.
