MEMBUAT WARNA DAN EFEK PADA LINK

 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 lihat sendiri

Carakitamembuat.blogspot.com.

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 lihat sendiri
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 lihat sendiri.

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 lihat sendiri

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 lihat sendiri

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 lihat sendiri.

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 lihat sendiri

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!!

(Sumber : Trick For New Bloggers dan http://tips-trik-blog.blogspot.com)