Masukkan 'Flash Animation' Dalam Header Blog

Ramai blogger yang telah mencuba untuk menggunakan 'flash animation header' bagi menggantikan 'header' dengan cara masukkan kod '<embed>' animasi tersebut kedalam kod HTML template tetapi tidak berjaya kerana bukan ini cara yang sebenarnya melaksanakannya.

Berikut dinyatakan cara mudah bagaimana untuk masukkan flash animation header dalam blog anda. Cara ini telah diuji dan berjaya dilaksanakan dengan menggunakan template "Minima" blogger baru dan menggunakan 'flash animation header' yang dipinjam dari satu laman lain, (sila ambil perhatian: pada mulanya pindaan yang dibuat tidak dapat di 'Save' menggunakan 'browser firefox 3' tetapi berjaya di 'save' dengan menggunakan 'browser internet explorer 7').

Sedikit pindaan perlu dibuat ke atas kod HTML template yang digunakan, oleh itu, untuk tujuan keselamatan adalah dinasihatkan dan digalakkan anda 'save'kan dahulu kod HTML template yang digunakan sekarang sebelum sebarang pindaan dilakukan. Sekiranya berlaku apa-apa perkara di luar jangkaan, template lama anda boleh di upload semula bagi menyelesaikan masaalah.

Log masuk ke dalam 'dashboard' blog anda dan pilih 'Layout', kemudian bawah 'Layout' pilih dan klik "Edit HTML" untuk membuka kod HTML blog anda serta 'tick' kotak 'Expand Widget Templates'.

(JANGAN LUPA SAVEKAN DAHULU KOD HTML YANG DIGUNAKAN SEKARANG)

Telusur ke bawah dalam kod HTML blog anda dan cari kod yang bertulis seperti berikut (mungkin terdapat sedikit perbezaan anatara kod HTML template 'minima' ini dengan lain-lain template):

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog Anda (Header)'    type='Header/></b:section> </div>

Tukarkan showaddelement='no' menjadi showaddelement='yes', dengan ini kita akan mewujudkan kerangka 'Add A Gadget' di bahagian Header blog kita:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'showaddelement='yes'> <b:widget id='Header1' locked='true' title='Title Blog Anda (Header)'    type='Header/></b:section> </div>

Anda boleh pilih untuk menambah bilangan maxwidgets='1' dari 1 menjadi 2 atau 3, untuk mewujudkan 2 atau 3 kerangka 'Add A Gadget" dalam bahagian header blog. Sekirangnya tags ini tidak terdapat dalam section ini anda boleh menaip sendiri maxwidgets='3'seperti contoh di atas.

Kemudian delete semua baris kod b:widget yang berwarna merah di atas. Dalam Kod untuk template "Minima" widget ini ditutup dengan tanda "/" sebelum tanda ">" dihujungnya, pada sesetengah template widget ini ditutup dengan "</b:widget>" beberapa baris di bawahnya, tentukan di delete kesemua baris sekali dengan penutupnya.

Seterusnya klik 'Save Template'. Blogger akan prompt anda untuk mengesahkan widget untuk header akan di delete, klik 'ok' untuk sahkan.

Dalam pilihan 'Page Elements' bawah 'Layout' anda akan dapati 2 atau 3 kerangka "Add a Gadget" pada bahagian header. Pilih dan klik 'Add A Gadget' yang di sebelah atas sekali dan dalam tetingkap 'Add A Gadget' pilih 'HTML/JavaScript'. Bila tetingkap 'Configure HTML/JavaScript' dibuka masukkan kod HTML animation flash header anda dalam kotak 'content' dan klik 'SAVE'. Klik 'View Blog' dan anda akan dapati flash animation header anda telah sedia dimasukkan.

Kod HTML flash animation header anda adalah seperti berikut:

<embed src="http://yourhost.com/yourflash.swf" width="1300" height="240"></embed>

Perbetulkan saiz width="" dan height="" di atas mengikut ukuran sebenar flash animation header anda.

Sekiranya flash itu tidak tepat kedudukkanya dalam bahagian header blog anda, sila 'tweak' CSS Stylesheet dalam kod HTML template anda seperti di bawah. Seperti biasa gunakan pilihan 'Edit 'HTML' dan 'tick' kotak 'Expand Widget Templates', telusur kod HTML and dan cari CSS seperti berikut:

/* Header ----------------------------------------------- */ #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

Delete $bordercolor warna merah di atas sekiranya anda tidak memerlukan border pada 'flash animation header' anda. Perbetulkan saiz sebenar width mengikut ukuran sebenar 'flash animation header'.

Selamat mencuba.