Rabu, Januari 06, 2010

Cara yang paling sederhana untuk membuat header baru pada template anda adalah dengan menyesuaikan header yang anda buat dengan ukuran kolom header yang sudah tersedia pada template. Baiklah, kita mulai:

Menemukan ukuran header
Sebelum membuat gambar header, anda harus mengetahui ukuran bagian header di template Blogger yang ada. Hal ini mencegah gambar header terpotong. Untuk menemukannya:

  • Klik Layout> Edit HTML
  • Cari kode di bawah ini:
# header-wrapper (
Tepat di bawah kode ini, anda akan melihat pernyataan CSS untuk keseluruhan ukuran dari header. Dalam Minima default template, ini muncul sebagai berikut:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Dari informasi diatas, anda sekarang telah mengetahui bahwa lebar dari header pada template anda adalah 660 piksel. Lebar header ini mungkin akan berbeda apabila anda menggunakan template yang telah dikostumasi. Sedangkan untuk ukuran tinggi tidak perlu anda pikirkan. Anda dapat membuat header setinggi apapun yang anda suka, tapi saya sarankan tinggi header tidak lebih dari 300 piksel dalam pembuatannya, anda tidak perlu mencatumkan ukuran tinggi tersebut dalam kode template.

Membuat Header
Bagi anda yang tidak begitu akrab dengan CorelDraw atau Photoshop, alternatifnya adalah menggunakan header gratis atau banner (dapat anda cari di Google) dan menyesuaikan ukurannya dengan kebutuhan anda.

Berikut beberapa site yang menyediakan header gratis:

Setelah header anda siap. Masukkan header anda Klik Tata Letak->Elemen Laman->Kolom Header
  • Masukkan Gambar
  • Tandai tombol "Selain judul dan keterangan"
  • Simpan
Catatan: dalam Template Minima ada kesalahan dalam CSS yang dapat membuat header terlihat sedikit miring. Hal dapat diselesaikan dengan mengubah margin, cari kode di bawah ini:

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

Ubah margin menjadi:

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

Selesai dan Selamat mencoba.

1 komentar:

prasko mengatakan...

terimakasih atas infonya...

Posting Komentar