Membuat Template Blogspot Bagian 3 (Header)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 2 jika belum mengikuti bagian 2 yaitu Bagian Dasar Template silahkan masuk ke Bagian 2.

Setelah bagian body dan Outer wrapper telah ditentukan sekarang langkah selanjutnya yaitu menentukan bentuk atau model Header Wrapper, pada bagian header ini yang ditentukan yaitu meliputi :
- Lebar dan tinggi Header
- Warna latar header
- Judul blog dan deskripsi (kita juga bisa menentukan logo blog melalui bagian header ini)

1. Sekarang masuk ke Edit HTML blog kamu caranya (blog yang digunakan untuk experiment) :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu. 


2. Cari dan hapus kode dibawah ini :

/* Awal untuk kode css header wrapper
======================================================== */
#header-wrapper {

}

3. Kemudian ganti kode tersebut dengan kode dibawah ini :

/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Keterangan :

• #header-wrapper :  memiliki lebar 960px dan tinggi 150px dengan warna latar hitam
• #header h1 : ini akan menentukan karakter judul blog
• #header .decription : ini akan menentukan karakter deskripsi atau keterangan blog

Bersambung ke bagian 4 Sidebar Wrapper >>

Dapatkan artikel terbaru seperti Membuat Template Blogspot Bagian 3 (Header) langsung ke Email kamu..!!!