Cara Mudah Mengganti Header Blog !!!

Apakah sobat blogger bosan dengan tampilan gambar Header Blog kita dan pengin mengganti dengan desain kita biar lebih personal, begini caranya:

Langkah Pertama buatlah desain Headernya dengan Program pengolah gambar (Corel atau Photoshop). Simpan dalam format JPG atau GIF.

*) Cara Pertama :

1. Sign in di Blogger

2. Klik menu Tata Letak

3. Klik menu Edit HTML

4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat blogger untuk backup


5. Klik kotak kecil di samping tulisan Expand Template Widget

7. cari kode berikut pada template sobat blogger :


b:section class="'header'" id="'header'" maxwidgets="'1'"

pada kode maxwidgets='1'. Rubah angka 1 menjadi angka 2, sehingga kodenya menjadi seperti ini :

b:section class="'header'" id="'header'" maxwidgets="'2'"

8. Klik tombol SIMPAN TEMPLATE

9. Kemudian masuk menu Elemen Halaman

10. Klik tulisan Edit yang ada pada elemen Header

11. Pilih radio button yang ada di samping tulisan dari komputer sobat blogger

12. Klik tombol Browse...Pilih Header yang telah di buat yang ada pada
komputer sobat blogger

13. Gambar Header sobat blogger akan di tampilkan

14. Klik tombol SIMPAN PERUBAHAN

15. Selesai.

**) Cara Kedua


Kalau kurang puas dengan tampilan di cara pertama, kita akan edit dengan cara yang kedua!

Jika sudah selesai mendesain Headernya, silahkan Upload gambar sobat blogger ! contoh di http://www.imageshack.com/

Caranya

1. Sign in di blogger

2. Klik menu Tata Letak

3. Klik menu Edit HTML

4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat blogger untuk backup

5. Klik kotak kecil di samping tulisan Expand Template Widget

6. Tunggu beberapa saat sampai proses selesai

7. Tambahkan kode berikut pada style sheet css sobat blogger.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan (sesuaikan dengan alamat gambar sobat blogger)

/* Header -----------------------------------------------

*/



#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid #ccc;

background:url(http://img518.imageshack.us/img518/5611/headermag15xcopy.gif);

}

}

8. Klik tombol Pratinjau untuk melihat perubahan yang ada

9. Bila sudah OK, klik tombol SIMPAN TEMPLATE

10. Selesai.