Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog A Z K A V E I R O: Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog
3

Cara Memberi Efek Hover Shadow Pada Link/Gambar di Blog

Share on :

 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...

PPC Iklan Blogger Indonesia

Ditulis Oleh : Azka Latif Noor ~ Tips dan Trik Blogspot

Azka Latif Noor 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

:: Get this widget ! ::

3 komentar:

Tri Cahyono Fakhri mengatakan...
Reply

bagus sob,,aku mau tanya,,template kamu download apa buat sendri?

Azkaveiro mengatakan...
Reply

@Tri Cahyono Fakhri download sob, krna terlalu sederhana jdi aku modifikasi ndiri

Ricky Haryanto mengatakan...
Reply

Mantabbbbb \m/

Posting Komentar

BLOG INI DOFOLLOW .
Silahkan tinggalkan komentar dan kritik sobat, tapi mohon jangan SPAM ya..!
Komentar SPAM akan di HAPUS oleh admin.
Komentar yang membangun sangat dibutuhkan oleh blog ini.
Terima Kasih.

Back to Top