Efek Hover Link/Tautan Menyala dengan CSS

Update terus . . .
Untuk kali ini blog Oto Website akan update postingan tentang Efek Hover Link/Tautan Menyala dengan CSS.

Untuk contohnya sobat bisa lansung aja melihat demonya.

Live Demo ▼

Udah pahamkan? gak pake lama-lama sekarang kita bahas cara memasanga dan menerapkannya ke blog sobat!

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML.

3. Jangan lupa CentangExpand Template Widget ➨ Bckup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat letakkan kode Css berikut di atas kode tadi.

a.otowebsite {
  color:#ccc;
  text-decoration:none;
  text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
a.otowebsite:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #FF00FF,
    0px 0px 3px #FF00FF,
    0px 0px 5px #FF00FF,
    0px 0px 30px #FF00FF,
    0px 3px 50px #FF00FF;

6. Simpan template.

Sekarang untuk memunculkan Efek Hover Link/Tautan Menyala dengan CSS ini sobat harus menggunakan script pemanggil, silahkan sobat buat atau edit postingan lalu masukkan kode seperti ini:

<a class="otowebsite" href="#">TEKS</a> 

Keterangan:
Ganti tanda # dengan link/url tujuan.
Ganti tulisan teks dengan teks link.

Saya rasa cukup, silahkan tinggalkan tanggapan dan komentar sobat!