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

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 9out of 10 based on 10 ratings. 9 user reviews.