1 Cara Membuat Efek Hover Shadow Pada Link Blog

Cara Membuat Efek Hover Shadow Pada Link Blog. Link Hover adalah kondisi link ketika disorot oleh mouse. Blog dan website biasanya memberikan warna yang berbeda pada link antara kondisi normal dan kondisi ketika disorot oleh mouse.

Sedangkan Shadow adalah bayangan. Jadi membuat efek hover shadow pada link blog berarti memberikan efek bayangan pada link di saat mouse menyorot link tersebut. Untuk contohnya bisa langsung dilihat pada blog ini. Efek hover shadow pada link mempercantik tampilan blog dan membuat pengunjung betah berlama-lama. Selain itu, pengunjung menjadi tertarik untuk mengunjungi link-link lain di blog. Ini dengan catatan blog anda mempunyai internal link, artikel terkait, dsb.

Langsung saja berikut adalah cara membuat efek hover shadow pada link blog:

1. Masuk ke blogger Anda ==> Rancangan ==> Edit HTML
2. Download template dulu, untuk jaga-jaga jika terjadi kesalahan maka Anda bisa mengembalikan template ke kondisi seperti sebelum diedit. Kalau tidak mau susah-susah mendownload, bisa dengan cara mengkopi semua kode template dan menyimpannya di notepad
3. Centang Expand Template Widget
4. Tekan F3 dan cari kode berikut:
   a:hover{
5. Masing-masing template mungkin mempunyai kode yang berbeda, terutama kode warnanya. Contoh di blog ini kode link hovernya adalah:
   a:hover{color:#ca1717}
6. Tambahkan kode: text-shadow:1px 1px 1px #000000 sehingga menjadi seperti di bawah:
   a:hover{color:#ca1717; text-shadow:1px 1px 1px #000000}
7. Simpan Template dan lihat hasilnya
8. Sampai di sini sebenarnya sudah selesai memberikan efek shadow hover pada link blog. Tapi untuk memperindah, maka akan ada sedikit tambahan
9. Kita buat link menjadi tebal ketika disorot dengan menambahkan font-weight:bold sehingga kode lengkapnya akan menjadi seperti di bawah:
   a:hover{color:#ca1717;font-weight:bold;text-shadow:1px 1px 1px #000000}
10. Ada kemungkinan hover pada link di postingan berbeda dengan link yang ada di sidebar. Maka Anda perlu memberikan efek pada kedua-duanya. Begitu juga Anda perlu memberikan efek tersendiri pada menu blog Anda
11. Anda bisa mengotak-atik sendiri hover link dengan menambahkan efek-efek yang lain, misalnya dengan efek ukuran font yang lebih besar
12. Selamat!!! Anda sudah bisa membuat efek shadow hover pada link blog

Sekian []