Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Background Animasi pada Judul Posting

Background animasi yang dipadukan dengan judul posting akan mampu menciptakan sebuah penampilan baru yang memberi nuansa baru pada blog. Background animasi ini akan membuat judul posting mempunyai latar belakang/bacground baru yang sangat jauh berbeda dari bentuk semula. Variasi animasi background yang dapat digunakan sebenarnya amatlah banyak, akan tetapi kali ini akan kita coba tampilkan sebuah background animasi pelangi yang sangat menarik untuk dimanfaatkan guna memperindah tampilan blog. Contoh bentuk Judul posting yang menggunakan background animasi :

  1. Background Pelangi (Animated Rainbow Background) :
  2. Judul Posting - Judul Posting - Judul Posting

  3. Blink (Blink Animation) :
  4. Judul Posting - Judul Posting - Judul Posting

Langkah untuk membuat Background Animasi Pelangi pada Judul Posting :

  1. Login ke Blogger.
  2. Amankan Template. Lihat di sini !
  3. Tetap di Edit HTML.
  4. Cari KODE:
  5. .post h3 a{
            margin: ...px;
            font-size: ...%/px;
            ... 
            ... 
    }
  6. Ganti dengan KODE baru seperti berikut:
  7. .post h3 a{
            background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_Rainbow-gubhugreyot.gif);
            display:block;
            padding:2px 4px;
            text-align:center;
            margin: ...px;
            font-size: ...%/px; 
            ... 
            ... 
    }
  8. Bila KODE pada template kamu hanya berupa :
  9. .post h3 { 
            margin: ...px; 
            ... 
            ... 
    }
  10. Ganti dengan KODE seperti di atas (ada penambahan "a").
  11. Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :
  12. .post h3 a{
            ....
            ....
            border-top:2px dotted red; 
            border-bottom:2px dotted red;
    }
  13. KODE baru-nya menjadi seperti ini :
  14. .post h3 a{ 
            background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_Rainbow-gubhugreyot.gif);  
            display:block; 
            padding:2px 4px; 
            text-align:center; 
            border-top:2px dotted red; 
            border-bottom:2px dotted red;
            margin: ...px; 
            font-size: ...%/px; 
            ... 
            ... 
    }

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

9 komentar:

  1. mas blognya keren bgt...oh ya..ajarin dong mas bikin kursor yg diikuti nama berbentuk jam seperti py mas itu gmn???
    tak tunggu ya di situs ku: www.liacantik-alea.co.cc
    makasih

    BalasHapus
  2. tolong buka blog saya di http://kustommanga.blogspot.com

    BalasHapus
  3. mohon izin menerapkan ilmunya ya gan......

    BalasHapus
  4. wwwwwwaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhhh,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, kasih tau dong widgetnya apa aja disini+template+semuanyaaaa,,,,,,aku penasaran

    BalasHapus
  5. bagaimana caranya bila kode diatas yang ingin diganti/ubah gak ada diblog saya, dimana ditempatkan......tolong dibantu yach
    blog saya http://bisnis-noscam.blogspot.com/

    BalasHapus
  6. cara membuat beckgroun animasi gimana...???

    BalasHapus

 
GR | Edited by | gubhug reyot