Warna dan Efek Pada Link Teks

Kustomasi Warna dan Efek Pada Link Teks : Sepertinya untuk link teks (text link) ini masih menarik untuk diulas kembali, setidaknya menurut Tips dan Trik Blog. Pada postingan terdahulu, telah dijelaskan tentang cara menghilangkan garis bawah pada link teks dan juga tips membuat link teks menjadi berwarna-warni seperti pelangi. Dan kali ini, masih seputar link teks, kita akan mencoba melakukan kustomasi link teks untuk warna dan juga efek-efek menarik lainnya. Jika tertarik, silakan ikuti tipsnya bersama tips dan trik blog berikut ini.


Seperti telah dijelaskan di sini, link teks ini dideklarasikan pada kode css seperti berikut ini yang diakses melalui Dasbor>>Tata Letak(layout)>>Edit HTML.

a:link{.............
....................
}
a:visited{...........
....................
}
a:hover{...........
...................
}

Dengan penjelasan seperti di bawah ini.


kode paling atas >> deklarasi untuk suatu link
kode nomor dua >> deklarasi untuk suatu link jika pernah dikunjungi atau di klik pada komputer yang sama.
Kode nomor tiga >> deklarasi untuk suatu link ketika disorot atau didekati oleh mouse.

Dari kode tersebut, kemudian kita dapat melakukan kustomasi untuk link teks tersebut dengan cara menambahkan beberapa deklarasi tertentu. Untuk lebih jelasnya, kita ikuti beberapa contoh kustomasi berikut ini.


Contoh Kustomasi Pertama

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah.

Kode html untuk warna dapat diganti sesuai selera masing-masing, tentang kode warna ini dapat dilihat di http://html-color-codes.info/.


Hasil link teks-nya akan menjadi seperti di bawah ini. (Untukl mengetahui perbedaannya, kita dapat mencoba mengklik atau mendekatkan mouse pada link teks-nya)

Tips dan Trik Blog


Contoh Kustomasi Kedua

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
font-size: 120%;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dan mempunyai ukuran font sebesar 120%.

Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog.


Contoh Kustomasi Ketiga

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
background: #FFFF00;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dan mempunyai background berwarna kuning.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Contoh Kustomasi Keempat

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
font-family:verdana;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dengan font yang berbeda.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Contoh Kustomasi Kelima

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
text-decoration:blink;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dan berkedip.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Contoh Kustomasi Keenam

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
border-style: outset;
border-color: #000000;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dan mempunyai border "outset" berwarna hitam.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Contoh Kustomasi Ketujuh

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
text-transform:uppercase;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah dengan huruf menjadi capital.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Contoh Kustomasi Kedelapan

a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
font-family: verdana;
font-weight: bold;
font-size: 120%;
background: #FFFF00;
text-decoration: blink;
}

Keterangan
Suatu link akan berwarna biru dan apabila link tersebut pernah dikunjungi (diklik) akan berubah menjadi biru tua dan apabila didekati mouse akan berubah menjadi warna merah, dengan font verdana tebal berukuran 120%, background kuning, dan berkedip.


Hasil link teks-nya akan menjadi seperti di bawah ini.

Tips dan Trik Blog


Setelah melihat beberapa contoh kustomasi di atas, silakan untuk berkreasi sendiri untuk mendapatkan tampilan link teks seperti yang dikehendaki.


Selamat Mencoba!!