Cara Mudah Mengganti Header Blog

Selamat datang di adituek blog. Sharing info saya kali ini adalah tentang bagaimana cara mengganti tampilan / gambar header blog kita. Untuk anda yang mungkin belum mengetahui caranya, silakan simak tutorialnya di bawah ini.

Ok. Sebelum melanjutkan, buatlah dulu desain Headernya dengan Program pengolah gambar (Corel atau Photosop kesayangan anda) dengan ukuran 847px X 200px. Simpan dalam format JPG atau GIF. Atau sesuaikan ukurannya dengan lebar Blog anda dan tinggi header Blog anda

Cara Pertama :

1. Login ke akun Blogger anda (wajib ‘ain)
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template Anda untuk backup
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. cari kode berikut pada template Anda (gunakan Ctrl +F untuk membantu pencarian) :

b:section class=”‘header'” id=”‘header'” maxwidgets=”‘1‘”
pada kode maxwidgets=’1‘. Rubah angka 1 menjadi angka 2 atau 3, sehingga kodenya menjadi

b:section class=”‘header'” id=”‘header'” maxwidgets=”‘3‘”

8. Klik tombol SIMPAN TEMPLATE

Setelah itu kemudian :

1. Klik menu Elemen Halaman Layout teplate
2. KLik tulisan Edit yang ada pada elemen Header
3. Tunggu beberapa saat
4. Pilih radio button yang ada di samping tulisan dari komputer Anda
5. Klik tombol Browse…
6. Pilih Header yang telah di buat yang ada pada komputer Anda
7. Tunggu beberapa saat sampai proses selesai.
8. Gambar Header Anda akan di tampilkan
9. Klik tombol SIMPAN PERUBAHAN
10. Selesai.

Cara Kedua

Kalau kurang puas dengan tampilan di cara pertama, kita akan edit dengan cara yang kedua!
Setelah selesai mendesain Headernya, silahkan Upload gambar Anda ! misalnya di http://www.photobucket.com/ . Atau bisa juga anda upload di dalam Blog anda sensiri. Ini lebih disarankan.

Kemudian lakukan langkah dibawah ini :

1. Login ke akun blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template Anda 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 Anda.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan (sesuaikan dengan alamat gambar Anda)

/* Header ————*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i256.photobucket.com/albums/hh174/mas_usup/mas_usup_top.gif);
}

8. Klik tombol Pratinjau untuk melihat perubahan yang ada
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

Demikian semoga bermanfaat. Jangan lupa like ya …

Salam.

Berlangganan konten blog ini:

Tinggalkan Komentar

Email anda tidak akan di publikasikan. Lengkapi Data di bawah ini :