Membuat Template Blogspot Bagian 3 (Header Wrapper)

Membuat Template Blogspot Bagian 3 (Header Wrapper)

Friday, July 27, 2012
Setelah pembahasan penerapan template bagian body  telah dilakukan seperti yang dijelaskan pada pembuatan template bagian 2, selanjutnya kita harus menentukan bagian header wrapper, yang berkenaan dengan dibawah ini :

1. Lebar dan tinggi header template
2. Warna latar header
3. Judul blog dan deskripsi (logo atau gambar)

• Mari kita lanjutkan pada langkah-langkah pembuatan header blog berikut ini :

1. Edit HTML yang dibuat pada template sebelumnya
2. Login blogger (blog yang dibuat)
3. Edit HTML template
4. Cari kode berikut :

#header-wrapper {  /*code CSS header*/

      }

• Kemudian ganti kode tersebut dengan CSS berikut :

#header-wrapper {
      width:854px;
      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:796px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
     }

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

• Lajutkan pada HTML dibawah template dan cari kode berikut :

<!-- start header-wrapper -->
<div id='header-wrapper'>

 <!-- widget header, description blogger-->

    </div>
<!-- end header-wrapper -->

• Ganti kode tersebut dengan kode dibawah :

<!-- start header-wrapper -->
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='KOD Tutor (Header)' type='Header'/>
</b:section>
    </div>
<!-- end header-wrapper -->

Keterangan :

1. #header-wrapper : memiliki lebar 854px.
2. #header h1 : ini akan menentukan karakter judul blog
3. #header .description : ini akan menentukan karakter deskripsi atau keterangan blog

Continued on the next article ( bag. 4 Outer Wrapper)