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!!
Artikel tentang Cara membuat efek shadow pada hover link Rating: 5
Ditulis oleh: Reggy Zian Purnama - ItemReviewed: Cara membuat efek shadow pada hover link

20 komentar:

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

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

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

    BalasHapus
    Balasan
    1. iya deh gpp :D
      ngomong - ngomong, makasih tips memasang threadnya ya?
      berfungsi :D

      Hapus
  3. muantef gan ... thank dah share

    BalasHapus
  4. wah manteep gan, efek shadow dihover linknya ^^

    BalasHapus
  5. terimakasih untuk informasinya

    BalasHapus
  6. Numpang nyimak dan ngalap tips-nya Mas, salam Kenal

    BalasHapus
  7. sumbernya darimana bro ?

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

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

      Hapus
  9. Mantap gan infonya--->>izin untuk mencoba

    www.forumcracker.blogspot.com

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

    BalasHapus
  11. mantap nih broo ... izin coba dulu ya.

    BalasHapus

Silahkan berkomentar dengan sopan dan mengarah pada artikel diatas. Komentar berunsur Spam dan Link aktif maupun statis akan dihapus

© 2012 Blognya Reggy All Rights reserved