Mengganti Header

Template blog bawaan blogger terkesan standar dan kurang menarik. dan yang paling penting template tersebut sudah banyak banget yang makai. Begitupun saat kita menggunakan template dari pihak ketiga (web penyedia free template) template tersebut juga sudah banyak yang menggunakannya. Lalu bagaimana biar tampilan blog kita unik?

Hedaer merupakan unsur penting. Karena secara otomatis saat orang mengakses blog kita, yang dia lihat pasti bagian headernya dong.... Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting terlihat unik dan enak. Bagi kamu yang tiodak bisa membuat dan mengunggah gambar sendiri. Santai saja. Karena ada banyak website yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti:  100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.
Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery
2. Klik pada bagian Free Graphics
3. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Isikan
-Name (Nama Anda)
-User Name (Login yang diinginkan)
-Password (isikan sandi anda)
-Enter Password again (isikan lag sandi untuk pengecekan)
-Email (isikan alamat email anda)
-Homepage (isikan URL blogspot anda)
-Isikan kode konfirmasi
-Klik Submit Registration Form
-Ada pesan


4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.7. klik Return to the front page of free Web Page Headers.


8. Lalu klik Login untuk mendowload gambar header.
9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:
1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketikkan header-wrapper lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;
Width adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Layout->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian Placement. Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Selamat mencoba. Semoga berhasil...

Komentar

  1. kok susah yah mas :(
    ad yg lebih mudah gak??

    BalasHapus
  2. belajar corel saja fecbuk
    makasih komennya disana sini

    BalasHapus
  3. maksih banyak mas. saya sempat pusing ganti header lewat edit html ternta ada cara yang gampang, ngk kepikiran saya.

    BalasHapus
  4. mas. .mau tanya, ko' header sama blogpost saya jadi ada 2 yah ?
    duplikat gitu mas. .
    jadinya kan ngga enak gitu keliatannya
    :(

    mohon bantuannya. .

    makasih

    http://dunianakayam.blogspot.com/

    BalasHapus
  5. makasih ya.... atas tutorialnya, sip deh, silakan berkunjung ke http://winsufmaulana.blgospot.com

    BalasHapus
  6. makasih ya atas tipsnya..
    sangat membantu.
    berkunjunglah ke http://silinaolala.blogspot.com
    terimakasih..^^

    BalasHapus
  7. kalo saya tidak menmukan kode #header-wrapper gimana?help www.sholeh.co.tv

    BalasHapus
    Balasan
    1. klau pnya q sih di find dengan #header-wrapper tpi klau wrapper nya di singkat kyak di bwah ini bsa ktmu,cob aja dlu,mksih
      coba #header-wpr

      Hapus

Posting Komentar

Postingan Populer