2012-04-12

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..!!!


Ada 16 komentar untuk Membuat Template Blogspot Bagian 3 (Header)

  1. ini yang saya tidak tahu dari awal,,,,maklum,,,,lmbt belajar

    BalasHapus
    Balasan
    1. Tenang Gan ini akan ada tutorial dari awal sampai akhir.... ditunggu ya...

      Hapus
  2. di tunggu tutorial lengkap secepatnya,,,

    BalasHapus
    Balasan
    1. Sabar ya Gan...bentar lagi ne...sedang dalam proses...

      Hapus
  3. makasih infonya mas usup,

    ohiya, saya mau nanya. mas usup pake floating GA gak melanggar TOS?

    BalasHapus
  4. makasih mas brow.
    susah2 cari artikel yang berbahasa Inggris ttg Tutorial Bikin Template, gak tahunya ada yang berbahasa Indonesia.
    hehehehe... lengkap dan gampang dicerna, lagi...
    skali lagi, makasih mas brow...
    :D

    BalasHapus
  5. Makasi kang buat tutorialnya. but Kang, Buat nambah Gambar di headernya ge mana??? :)

    BalasHapus
    Balasan
    1. Sabar ya brow....lagi servis kompi dulu ne...

      Hapus
  6. Tutornya bermanfaat banget kang :D saya mau nanya nih kalau headernya di ganti ama gambar gimana caranya kang?? terima kasih sebelumnya ^_^

    BalasHapus
  7. saya baca dari tutor no. 1 - 6 cuma kode css doang. tapi, belum ada tutor tentang bagaimana urutan kode pemanggilnya. itu juga penting gan :)

    BalasHapus
    Balasan
    1. Itu dengan maksud agar tidak membingungkan (buat yg pemula), tutorial cara pemanggilan / menghubungkan antara CSS dan HTML telah sya bahas diartikel sebelumnya bro.

      Hapus
  8. Balasan
    1. baca keterangan pada artikel sebelumnya!!!

      Hapus