Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog

Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog

 Assalamualaikum WR... WB...

Sharing saya kali ini akan membahas tentang membuat efek hover menggunakan efek bayangan(shadow).

Apakah Yang dimaksud dengan shadow?? Dari artinya saja sudah jelas yaitu "Bayangan". Shadow adalah bayangan.

Masih ada yang belum tau dengan hover???

hemmmmm... Ok.. Saya kasih tau dah...

Secara sederhana pengertian dan fungsi hover adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah : background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link). Sumber : http://gubhugreyot.blogspot.com

Kita langsung aja ke intinya ya...

A. Cara Memberi Efek Hover Shadow Link

Silahkan langsung menuju Rancangan > Edit Html. 

1. Cari kode

a:hover {

    text-decoration: underline;

    color: #0cff00;

    }

2. Ganti dengan

a:hover {

  color: #ff00ff;

  text-decoration:none;

  text-shadow:5px 5px 5px #ff00ff}

Mudahkan kan??

Anda Juga dapat mengganti warna sesuai selara anda : silahkan pilih warna yang anda inginkan disini : Kode Warna HTML 

B. Cara Memberi Efek Hover Shadow pada Gambar

Anda juga bisa menambahkan efeknya ke gambar..

1. Cari kode

.post img { padding: 10px; border: 0px }

=>>Setiap blog berbeda lho??? jadi sobat sesuaikan sendiri ya??

2. Bawahnya tambahkan kode

.post img:hover {-moz-box-shadow: 0 0 13px;} 

Mudah kan?? Sebenarnya banyak sekali efek-efek hover yang lainnya... Ini hanyalah sedikit dari yang saya ketahui..

Selamat mencoba... Semoga sukses... Jangan lupa Komentarnya dikolom komentar ya...???

Sampai Jumpa dipertemuan selanjutnya...

Wassalamualaikum WR.... WB...

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://azka-veiro.blogspot.com/2012/07/cara-memberi-efek-hover-shadow-pada.html" target="_blank">Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog</a>

:: Get this widget ! ::