Cara membuat efek shadow pada hover link

Cara membuat efek shadow pada hover link

Hallo sobat? apa kabar? baik - baik saja kan?. Kali ini saya akan sharing tutorial blogspot lagi niih. Yaitu Cara membuat efek shadow pada hover link. Sobat tau tidak apa maksud Shadow? shadow kalau di artikan ke bahasa indonesia adalah bayangan, ketika sobat arahkan cursor ke link aktif, di link tersebut keluar bayangan (shadow). Nah, sudah mengerti kan? Yasudah dehh, tidak usah basa - basi lagi kita langsung ke TeKaPe..

1. Pastikan sobat sudah login pada blog sobat
2. Masuk ke halaman Template
3. Edit Html lalu lanjutkan
4. Cari kode a:hover atau lebih lengkapnya seperti ini
a:hover {
color:#ffa500;
text-decoration:underline;
}
5. Nah sobat hanya tinggal menambahkan kode text-shadow:1px 1px 1px #ff5000; di kode tersebut atau jadinya akan seperti ini
a:hover {
color:#ffa500;
text-shadow:1px 1px 1px #ff5000;
text-decoration:underline;
}
6. Lalu Simpan Template dan lihat hasilnya

Selain memberi efek shadow pada hover link, kita juga dapat memberi efek shadow pada hover img, mau tau caranya? langsung dehh ikuti di bawah ini:

1. Masuk ke halaman pengeditan Template
2. Edit HTML lalu lanjutkan
3. Cari kode .post img atau lebih lengkapnya seperti ini:
.post img {
padding: 10px; border: 0px;
}
4. Di bawahnya copy pastekan kode di bawah ini:
.post img:hover {
-moz-box-shadow: 0 0 13px;
}
5. Simpan Template dan lihat hasilnya

Keterangan: Kode #ff5000 adalah kode warna efek shadownya, sobat bisa merubah warnanya dengan kode warna lain, cek kode warna Disini

Sudah mengerti kan? bagaimana cara membuat efek shadow pada hover link , yasudah deh, sampai disini dulu ya? Selamat Mencoba!!
Cara membuat efek shadow pada hover link
Writter: Reggy
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

26 comments Skip to comments

nice share sob, ada artikel baru nih sob...

sama - sama sob. ok nnt saya main ke blog sobat :)

Nice masbro, bagus kalau gak berlebihan text shadow nya ane malah terasa keganggu kalau berlebihan, :D

iya deh gpp :D
ngomong - ngomong, makasih tips memasang threadnya ya?
berfungsi :D

wah manteep gan, efek shadow dihover linknya ^^

Numpang nyimak dan ngalap tips-nya Mas, salam Kenal

boleh coba ya sob

adanya kode kaya gini sob a:hover { text-decoration: underline; color: $(link.hover.color); gmn?

ganti aja kaya yang diatas gan. trus cek kode warnanya disini >> http://blognya-reggy.blogspot.com/2011/11/cek-kode-warna-html.html

Mantap gan infonya--->>izin untuk mencoba

www.forumcracker.blogspot.com

Mantap bang saya berhasil nih buat nya . jangan lupa mampir dan follow blog saya.... thx

mantap nih broo ... izin coba dulu ya.

work gan
Saya tunggu kunjungan baliknya gan

Disapper whatsapp messages
That's why we're excited to introduce the option to use disappearing messages on WhatsApp

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon