Cara menambah banner blog di header - Bagi yang sudah bosen dengan tampilan
Gambar Header Blog kita (kayak Ocy) dan pengin mengganti dengan desain kita biar lebih personal, mari simak cara-caranya !!!
Langkah
Pertama Buatlah desain
Headernya dengan Program pengolah gambar (Corel
atau Photosop) dengan ukuran 847px X 240px. Simpan dalam format JPG atau
GIF.
Let's Edit !!!
*) Cara Pertama :1. Sign in di Blogger
2. Klik menu
Layout3. Klik menu
Edit HTML4. 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 :
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
Kemudian ................????????????????
1. Klik menu
Elemen Halaman2. 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 PERUBAHAN10. Selesai.
**) Cara KeduaKalau kurang puas dengan tampilan di cara pertama, kita akan edit dengan cara yang kedua!
Jika sudah selesai mendesain Headernya, silahkan Upload gambar Anda ! contoh di http://www.photobucket.com/
Let's Edit !!!Caranya
1. Sign in di blogger
2. Klik menu
Layout3. Klik menu
Edit HTML4. Klik tulisan
Download Template Lengkap, silahkan save dulu template Anda untuk backup
5. Klik kotak kecil di samping tulisan
Expand Template Widget6. 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
ada9. Bila sudah OK, klik tombol
SIMPAN TEMPLATE10. Selesai