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;
}
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)
Contoh Kustomasi Kedua
a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
font-size: 120%;
}
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;
}
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 BlogContoh Kustomasi Keempat
a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
font-family:verdana;
}
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 BlogContoh Kustomasi Kelima
a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
text-decoration:blink;
}
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 BlogContoh Kustomasi Keenam
a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
border-style: outset;
border-color: #000000;
}
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 BlogContoh Kustomasi Ketujuh
a:link {
color: #04B4AE;
}
a:visited {
color: #08088A;
}
a:hover {
color: #5F04B4;
text-transform:uppercase;
}
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 BlogContoh 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;
}
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 BlogSetelah melihat beberapa contoh kustomasi di atas, silakan untuk berkreasi sendiri untuk mendapatkan tampilan link teks seperti yang dikehendaki.
Selamat Mencoba!!
(Sumber : Trick For New Bloggers)
Baca juga yang ini.
- Lanjutan Textarea
- Textarea untuk Tukeran Link
- Menambahkan scrollbar pada bodi postingan
- Menambahkan scrollbar di dalam postingan
- Tips Aman Berinternet dengan Notebook
Description: Kustomasi Warna dan Efek Pada Link Teks Rating: 4.5 Reviewer: Unknown - ItemReviewed: Kustomasi Warna dan Efek Pada Link Teks
{ 0 comments... read them below or add one }
Post a Comment