Orang termiskin yang aku ketahui adalah orang yang tidak mempunyai apa-apa kecuali uang - John D.Rockefeller

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Cara membuat background header animasi

Bagaimana ya caranya membuat background header blog menjadi animasi? tadinya itu adalah problem bagi saya. Tapi, ternyata setelah saya coba utak utik dan saya coba berkali-kali tenyata tidak sulit dan tidak membutuhkan waktu yang lama untuk bisa mempercantik blog kita, paling kendala yang saya temui sedikit rumit "tadinya" adalah saat mengatur lebar dan tinggi ukuran sisi sisinya, karna memang untuk tampil bagus dibutuhkan angka Pixel yang pas, baru bisa dibilang sempurna.

Baiklah tanpa panjang lebar lagi langsung saja kita mulai tutorialnya membuat header blog kita menjadi lebih hidup, berikut caranya ;

1. Login Blogger jika anda sudah login email (gmail) tinggal tekan ctrl+t lalu ketik blogger dan tekan ctrl+enter lebih cepet sih kalau menurut saya,

2. Saat ini anda sudah masuk menu Dasbor, pilih menu Rancangan

3. Klik menu Edit HTML

4. Jangan lupa centang kolom Expand Template Widget

5. Tekan Ctrl+F cari kode dibawah

#header{background:

maka akan ketemu alamt link yang seperti ini
#header{background:#242424 ur1("http://i795.photobucket.com/albums/yy237/clerk_album/digits-numbers-binary-rain.gif") repeat left;float:left;width:1048px;height:20px;margin:0;border:0 solid

Kode yang berwarna merah silahkan diganti alamat link animasi anda bisa dalam format .gif atau tetap seperti itu jika ingin tampilannya seperti header blog saya

6. Ganti besar pixelnya
width:1048px (untuk mengatur lebar kesampingnya)
height:78px (untuk mengatur tinggi/penyesuaian keatas)
biasanya disini yang sedikit rumit, namun jika sudah paham akan cepat dalam menentukan ukurannya.
7. Jangan lupa dilihat dulu lewat menu Pratinjau

jika hasilnya sudah sesui keinginan anda bisa langsung Save template
dan akhirnya selesai ^_^ bagaimana mudah bukan? selamat bereksperimen teman teman....

14 Comments

  1. Wis, Keren Juga. tapi bisa juga kan pake Flash, biar lebih interaktive! cuman masih lebih suka sama yang dulu (nggak bergerak headernya). thanks sob, Nice Article.

    Salam.
    Happy Blogging.

  2. gmana sih cara pasang banner Flash ?? ajarin dongg...

  3. Terimakasih atas infonya, namun saya masih kesulitan nih?salam kenal aja yah

  4. wah agan2 yang sudah master semua....
    @ghani: ya bisa bro.. saking bingungnya mau nulis apa ni, trus bikin aja deh tutor kek gini :p

    @Achmad : bisa bisa...

    @Arpan: bingung dimananya brader.. sebenernya tiap sc blog kan beda headernya, jadi muti liat2 dulu, atau berani eksperimen... klo berhasil wah seneng banget lho rasanya...

  5. thanks info nya ...
    kunjungi juga ya ..
    http://randyconfickerzsystem.blogspot.com/

  6. Randy: blognya dah dihapus ya gan?
    @sang: semoga si bermanfaat ya sob...

    All thx atas koment anda sekalian,ini yang membuat blog ini berkembang ^_^ GBU all

  7. Mantap blognya mas, indah sekali

  8. terimakasih mas raharja atas komentar dan kunjungannya... kalau blog saya ini idah ini masih awalannya mas masih belajar kok

  9. trims informasinya bosss.... salam hanhat Nalkoto

  10. sama-sama mas nalkoto.. sudah menyempatkan diri untuk main ke blog saya.. saya juga akan main-main ke tempat anda.. salam sukses!

  11. di html saya cari gak ketemu script #header{background: ,nah..ada solusi lain?? hayooo??

  12. Buat Secret's kalau yg begini ada ga' ? cobain dech....

  13. Maksudnya cari yang ini : header.background.gradient

+ Add Your Comment

Tinggalkan komentar,kritik dan saran untuk membangun site ini menjadi lebih baik.
[No]Sara! [No]Porn! [No]Bad Words!
PS-Crew akan memantau dan menghapus commet yang tidak layak [Thanks!]

Profil

My Photo
Putra
Ya inilah saya.. masih belajar tentang blog dan posting, jadi kalau ada yang kurang dalam blog saya mohon untuk dikasih masukan.. Jadi saya harap kepada teman semua jangan sungkan-sungkan untuk memberikan komentar di setiap postingan saya ya.. Terimakasih
View my complete profile