Rabu, 08 Februari 2012

Cara Membuat Efek Shadow Pada Hover Link

Cara membuat efek shadow pada hover link:

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;
}

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

Tidak ada komentar:

Posting Komentar