Tutorial Background underline

Assalamualaikum w.b.t . Hari ni amy na ajar korang buat background underline. cara gunanya macam korang buat underline dalam post tu . sama ja :) cuma yang ni ada background.mai amy tunjuk pic, daripada korang dah buat then menyesal tak sudah . XD

Nampak tak tu ? maklum la gambar sangat *mengecilkan:D. na lagi pahemm kan,cube halakan cursor korang dekat sini .konfem tak nyesal punye,kan lawa tu .ecece :P

oke,kite mule sekaranh ea.

1) Mula-mula dashboard->design->edit html->tick expand widget template(penting)
2) Lepas tu tekan ctrl+f dan cari code ini

u {

3) Oke,dah jumpa ? now pulak copy code ini

text-decoration:none;background: #F5A9D0;color: #FFFFFF;border-radius: 5px;padding-top: 1px;padding-bottom: 1px;padding-left: 2px;padding-right: 2px;}

4) And paste dekat bawah code yang korang cari tadi tu ye.ingat,bawah tahu ! :D
5) PREVIEW dulu baru save k.

simple ja kan. tapi jap eh,tak abes lagi. tak take note dulu :D

NOTA KAKI:

1. color for background and color font boleh ditukar k,cari dekat SINI
2. korang nak tak korang punya background underline ada hover?kalau nak,kite sambung lagi k.:D . *tak lama pun

1)  Tambah code ni

u:hover {text-decoration:none;background: #F5A9D0;color: #000000;border-radius: 5px;padding-top: 1px;padding-bottom: 1px;padding-left: 2px;padding-right: 2px;}

2) And paste dekat bawah code terakhir background underline. anda pahemm ? hehe .
3) So,code penuh kalau ada hover macam ini

u {text-decoration:none;background: #F5A9D0;color: #FFFFFF;border-radius: 5px;padding-top: 1px;padding-bottom: 1px;padding-left: 2px;padding-right: 2px;}u:hover {text-decoration:none;background: #F5A9D0;color: #000000;border-radius: 5px;padding-top: 1px;padding-bottom: 1px;padding-left: 2px;padding-right: 2px;}

4) Oke done. baru la save.amy rase kalau ada hover lagi cun melecun tahu :)

---

Thank you for reading

---

Tweet