Masukkan "Flash Header"

Panduan ringkas masukkan Animated Flash Header dalam header blog.

Template dan Kod HTML template yang dijadikan panduan adalah template "Minima iaitu salah satu template yang terdapat dalam Blogger. Kemungkinan kod yang digunakan sedikit berbeza bagi lain-lain template terutamanya template dari pihak ketiga.

1. Sediakan terlebih dahulu gambar animasi header yang akan digunakan. Simpan dalam komputer sendiri kemudian hoskan gambar dalam mana-mana image hosting. Sila ikut panduan bagaimana muatnaik gambar dari picasa web album atau dari photobucket atau dari flickr atau dari lain image hosting.

1.1 Dapatkan alamat URL pautan dari gambar yang telah dihos. Contoh seperti berikut:

http://i143.photobucket.com/albums/r153/kupia/CP2.jpg

2. Log masuk dalam dashboard blogger melalui Blogger In Draft, pilih Design | Edit HTML.

Skrol ke bawah dan cari kod di bawah <div id='header-wrapper'> dalam kod template:


Lepas ini, skrol ke bawah ke bahagian CSS stylesheet yang berkaitan dengan header cari kod seperti di bawah. Tambah kod background warna merah yang dimasukkan alamat URL pautan gambar animasi yang akan digunakan. Pastikan juga kod warna #fff adalah kod warna latarbelakang header blog yang betul.

/* Header -----------------------------------------------*/ #header-wrapper { width:660px; margin:5px; text-align: center; color: #666666; background: #fff url(http://i143.photobucket.com/albums/r153/kupia/CP2.jpg) no-repeat left; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 5px; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: auto; }

Setelah dimasukkan gambar background header blog sila preview dulu jika semua berjalan lancar, boleh kod ini di SAVE.

Selamat mencuba.