Skip to content Skip to sidebar Skip to footer

Cara membuat border di bawah link dan gambar

Cara membuat border di bawah link dan gambar
Kalau melihat gambar di atas di bawahnya ada border dashed warna hitam, jadi aku akan menuliskan cara membuat border di bawah link dan gambar. Contohnya di blog aku ini saja kalau cursor menyentuh link dan gambar akan keluar border dan warna hitam. Cara membuatnya sebagai berikut:

1.Dashboard > Template >edit HTML
2.Expand Template Widget dan tick F3 atau CTRL + F dan cari kode:
a:hover {   (paling atas)
Hapus dulu kalau di bawah kode a:hover { ada kode berikut (contoh):

color:#000000;
text-decoration: underline;
3.Letakkan kode berikut di bawah kode di atas (cari kode a:hover { yang ada di bawah kode /* Content karena mungkin kode itu lebih dari satu xD.
color:#000000;
border-radius:3px;
border-bottom: 1px dashed #000000;
}
Warna pink adalah kode warna link bisa ditukar dengan warna lain, warna orange 1px itu ketebalan border, warna merah dashed itu jenis border nya bisa ditukar dotted, dll dan warna biru itu kode warna border nya.

Kalau di atas dan bawah link dan gambar mau ditaruh border kodenya jadi seperi di bawah ini:
a:hover {
color:#00AEAE;
border-radius:3px;
border-top: 1px dashed #EA0000;
border-bottom: 1px dashed #EA0000;
}
Contoh gambarnya seperti di bawah ini (link DEMO)
Cara membuat border di bawah link dan gambar
4.Terakhir tekan preview atau pratinjau dulu baru simpan template.

1 comment for "Cara membuat border di bawah link dan gambar"