Cara Membuat Efek Bersinar Pada Link Di Posting Blogger

Advertisements

Advertisements

Sembari nunggu temen ngajak maen futsal dimanfaatkan dulu untuk membuat tutorial yang masih tentang seputar tampilan blogger. Kali ini saya akan membikin efek bersinar atau glowing pada link yang ada di dalam posting blog. Tujuannya yaitu untuk memberikan suatu perhatian lebih kepada pembaca saat mereka sedang membaca artikel-artikel di blog anda.

Cara kerja dari efek bersinar ini yaitu dia akan muncul ketika pengunjung melakukan hover terhadap semua link yang ada di kiriman blog anda, bukan hanya itu saja karena saya membuat efek ini dengan menambahkan sedikit efek animasi CSS3 yang akan terus bersinar mirip seperti cahaya kunang-kunang jika pengunjung menghentikan cursor mereka pada link tersebut, silahkan lihat contohnya pada halaman demo.

Efek ini tidak akan bekerja pada semua browser, silahkan coba dengan peramban Mozilla Firefox.

Lihat Demo

---

Persiapan :

---

Salin semua kode dibawah

Klik ganda untuk menyalin

.post-body a {
  color: #00a693;
  text-decoration: none;
}
.post-body a:hover {
  color: yellow;
  animation: sinar .4s alternate infinite;
  z-index: 1;
  color: #fada5e;
  text-shadow: 0 0 2px #fada5e, 5px 3px 8px #fada5e;
}
@keyframes sinar {
  from {
    text-shadow: 0 0 2px #fada5e !important;
  }
  to {
    text-shadow: 5px 3px 8px #fada5e;
  }

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda lalu klik Template

2) Lakukan Back up lalu klik Edit HTML

3) Cari kode ]]></b:skin> lalu pastekan semua kode yang telah di salin tersebut tepat diatasnya

5) Klik Simpan

Sekarang efek glow pada link ini akan bekerja secara otomatis dan membuat tampilan postingan blog anda lebih bergaya. Enjoy & Happy Coding!