Cara Membuat Header Animasi

Kalian liat kan header (ikan-ikan yang berenang) yang ada di atas blog ini, Itulah yang saya maksud. Sebenarnya header itu bukan gambar yang bergerak (berformat giv), melainkan sebuah widget dari abowman.com yang di ubah ukurannya menjadi ukuran header, dan diubah backgroundnya, sesuai dengan yang kita inginkan.

jadi gambar ikan-ikan itu bisa diberi makan (dengan cara diklik) dan bergerak sesuai arah kursor. Selain fish (ikan), masih ada lagi widget dari abowman.com yang lain yang bisa di buat header seperti Stingray, spider (laba-laba), Tree Frog (katak), dll. Tapi, kali ini saya akan menjelas cara membuat header seperti yang saya miliki sekarang ini (header fish).

Bagi kalian yang tertarik membuat header animasi seperti yang ada di blog ini, saya akan menjelaskan caranya,

1. Pertama-tama kita buat backgroundnya. yaitu sebuah file gambar (sebaiknya yang berformat JPEG) yang berukuran sekitar width=950 dan height=250 pixel. Lalu upload ke salahsatu website yang bisa menyimpan gambar, sebaiknya http://upload.kapanlagi.com/.

2. Untuk mendapatkan kode widget. kita harus masuk ke http://abowman.com/, lalu cari postingan “fish”. Untuk mempermudah kalian lansung klik saja alamat postingnya, DI SINI.

3. Setelah masuk kedalam postingan “fish”. kita harus mengedit. yaitu mengganti background dll.



4. Pada "edit settings". Yang harus diubah adalah:

a) Background image (jpg)= isikan alamat URL gambar yang telah di upload tadi (gambarnya harus berformat JPEG), caranya klik kanan pada gambar lalu klik “copy image location” lalu kemudian paste. (Sebaiknya sebelum mem-paste, hapus tulisan http:// yang ada di dalam bar “background image (jpg), supaya nantinya tidak double seperti ini, http://http://.

b) Setelah mengganti background, kalian juga bisa menentukan jumlah ikan “number oh fish”, dan warna masing-masing ikan “fish color”.

c) Setelah selesai mengedit, copy scrip-nya di “embed”.



d) Kemudian, login ke blogger lalu,

-Pilih tata letak
-Elemen laman
-Tambah gadget di header.

5. bagi kalian yang tidak bisa meletakkan gadget di header, ini solusinya,

a. Klik tab Edit HTML
b. Beri tanda centang pada Expand Widget Template untuk membackup.
c. Cari kode dibawah ini, (untuk memudahkan gunakan CTRL+F).

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Setelah itu, ganti kode diatas dengan kode dibawah ini

<b:section class='header' id='header' preferred='yes'>

d. lalu klik Simpan Template.

6. Kalau sudah, kembali ke “elemen laman”, lalu klik "tambah gadget" yang ada pada header.



Lalu pilih HTML/JavaScript, kemudian paste kode widget (“header ikan”) tadi, lalu simpan.

supaya ukuran widget sesuai dengan gambar (sekitar 940x250 pixel), ganti ukuran widget menjadi(sekitar width="940" height="250" ). caranya, tinggal ubah ukuran widget pada scripnya. cari kode width= (untuk lebar) dan height= (untuk tingginya), lalu ubah ukurannya menjadi, width="940" height="250".

7. Terakhir klik save.

dan selesai…

catatan: cara membuat header dengan widget yang lain(Stingray, spider (laba-laba), Tree Frog (katak), dll) juga sama, tidak jauh berbeda dengan cara yang saya paparkan di satas.

Selamat Mencoba, Semoga Berhasil, dan Semoga Bermanfaat!!!