Membuat Effect Star (Efek Bintang) pada Link Blog

Menggenapi meriahnya pesta kembang api Tahun Baru 2011 saya posting cara membuat animasi efek bintang pada link di blog yang cukup membuat blog menjadi tampak lebih cantik, hal tersebut juga tidak membuat berat load blog karena file yang dipakai ukurannya sangat kecil.

Cara membuat link blog bertaburan bintang adalah sebagai berikut : Pertama kali anda tentu wajib masuk (login) ke dasbor blog anda melalui http://www.blogger.com selanjutnya anda klik Rancangan, pilih Edit HTML carilah kode berikut ini : (gunakan ctrl+f untuk mempermudah pencarian)


/* Content ----------------------------------------------- */
Setelah kode tersebut ketemu, coba telusuri ke bawah sedikit dan temukan kode berikut ini :

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
Pada beberapa template kadang berbeda jadi carilah pada sesen code /*content serangkaian code hover jika pada template anda berbeda.
Langkah selanjutnya anda tambahkan kode berikut ini tepat di bawah kode tersebut

background-image:url(http://url gambar stars.gif milik anda)
Sehingga susunan kode lengkapnya akan seperti ini :

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
  background-image:url(http://url gambar stars.gif milik anda)
Huruf yang berwarna merah dapat di modif sesuai selera anda gantilah dengan URL gambar yang anda kehendaki, jika anda belum memiliki gambar star/bintang silahkan anda ambil disini. ada tinggal klik kanan open picture in new tab kemudian copas URL yang ada di address bar.

Okey untuk mempermudah anda, saya beri lengkap dengan link gambarnya, berikut kodenya :

background-image:url(http://lh4.ggpht.com/_lDwJRuTZfPg/TRi4NjENFVI/AAAAAAAAAoM/o24M73_tx5E/stars1.gif)

Sudah ada 12 komentar, tambain donk.!

  1. Keren gan.. hhihihiih

    Ane penginnn punya blog kyak giniiii,,...
    Gmna cranya bikin
    TAB" diatas seh gan????Kok ada 2 bagian... hemmm

    punya ane
    ifacandoit.blogspot.com
    *but..undermaintenance sekarang gan hahaha

    BalasHapus
  2. "TAB" dua bisa ditaruh di atas header dengan template defalut blogger pertama saya pikir juga mustahil, tspi bisa tuh, edit HTML posisi header yang di lock "true" kita ganti dengan "false" terus masuk Rancangan pidain deh tu header kebawah. bahkan kita bisa menghapusnya dan mengganti dengan marquee pasti tambah manis....

    BalasHapus
  3. terimakasih banyak bos informasinya , , tapi sudah sesuai intruksi belum tampil d blog saya,,

    http://dedenztb.blogspot.com/

    BalasHapus
  4. @Tubaguz Deden Anwarudin
    Coba anda cek alamat http/url gambarnya, dengan copas di address bar kalo muncul pasti bisa, tapi kalo tidak muncul, berarti ada kesalahan pada url itu.

    Ini kode yang aku pakai 100% ok

    background-image:url(http://lh6.googleusercontent.com/_lDwJRuTZfPg/TRFoH-kxetI/AAAAAAAAA7I/UTjdUOC2KYE/Pisbon%20Star.gif)

    BalasHapus
  5. Gimana tuh caranya biar cursor'y ada efek blue stars gt? lucu... pingin...

    BalasHapus
  6. Izin repost boleh gan?
    ya ya ya?
    luv it much!
    skrg blog aq udah keren!
    tapi pign 1 lagi:
    CURSOR'y pingin juga... ada animated blue stars... dtgu reply'y gan!
    juga izin repost'y!

    many thanks

    BalasHapus
  7. Special jawaban buat @Rednino di http://pisbon.blogspot.com/2011/04/membuat-blue-star-pada-krusor-untuk.html

    BalasHapus
  8. mantap gan aq berhasil thank banget muaaaaaaaaaach

    BalasHapus
  9. terima kasih sekali gan atas infonya yang membangun, saya akan selalu belajar dari blog juragan, salam kenal.
    http://caramembuatyangakumau.blogspot.com

    BalasHapus
  10. @Rudy Hartono Terima kasih kunjungannya, kembali salam....

    BalasHapus

Kalau tidak mau tambah komentar ya, tinggalin duwit ya?