Thursday, December 30, 2010

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1V5qpGT58POtlgvtYCk6hfdy33WXN_0oifDmuPERZ_FOb0pH0Ae0VvyCI7w2MWiUcoG4RYKbg3gbkTJeYuBwmVA1cyioCXMANNTEPCKQ-sEALrPRGXC_QTRSjVYtmX9C1tg6z1aj13xXM/)

No comments:

Post a Comment