Cara Membuat Background Animasi pada Judul Posting

Selasa, 13 November 2012

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 :

Background Pelangi (Animated Rainbow Background) :

Judul Posting - Judul Posting - Judul Posting

Blink (Blink Animation) :

Judul Posting - Judul Posting - Judul Posting

Langkah untuk membuat Background Animasi Pelangi pada Judul Posting :

Login ke Blogger.
Amankan Template. Lihat di sini !
Tetap di Edit HTML.
Cari KODE:

.post h3 a{
        margin: ...px;
        font-size: ...%/px;
        ... 
        ... 
}

Ganti dengan KODE baru seperti berikut:

.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; 
        ... 
        ... 
}

Bila KODE pada template kamu hanya berupa :

.post h3 { 
        margin: ...px; 
        ... 
        ... 
}

Ganti dengan KODE seperti di atas (ada penambahan "a").
Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :

.post h3 a{
        ....
        ....
        border-top:2px dotted red; 
        border-bottom:2px dotted red;
}

KODE baru-nya menjadi seperti ini :

.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; 
        ... 
        ... 
}

Mungkin yang anda cari :

blog