Kamis, 18 Oktober 2012

Memberi Warna Berbeda pada Link yang Dikunjungi/Di-klik (Visited Link)


visited-link
Trik CSS ini digunakan untuk memberikan warna khusus pada visited link & berlaku untuk semua link yang ada di halaman blog/website kecuali untuk link yang menggunakan external script, misalnya widget-widget tambahan. Cara ini unik dan cukup berpengaruh karena sangat berguna bagi pengunjung agar tidak bingung ketika melakukan browsing, terutama pada website/blog yang memiliki link-link navigasi pada halaman-halaman yang hampir sejenis. Selain itu, pengunjung juga dapat mengetahui link mana yang telah ia klik sebelumnya jika ia ingin melihat kembali halaman tersebut karena ada sesuatu yang tadinya terlewatkan.

Cara ini merupakan override pada aturan link yang telah ada sebelumnya di template HTML. Jadi anda tidak perlu lagi mencari urutan aturan link di dalamnya. Cukup tambahkan aturan CSS berikut sebelum </head> di template HTML:
<style type='text/css'>
a:visited {color:#808080;text-decoration:none;}
</style>
Ganti #808080 dengan kode warna yang diinginkan. Ganti none dengan jenis properti text-decoration yang lain, misalnya underline (garis bawah) atau overline (garis atas), atau properti yang lain. But just remember, make it natural 'cuz kadang-kadang yang terlalu berlebihan malah tidak asyik .^_^

visited-link
Trik CSS ini digunakan untuk memberikan warna khusus pada visited link & berlaku untuk semua link yang ada di halaman blog/website kecuali untuk link yang menggunakan external script, misalnya widget-widget tambahan. Cara ini unik dan cukup berpengaruh karena sangat berguna bagi pengunjung agar tidak bingung ketika melakukan browsing, terutama pada website/blog yang memiliki link-link navigasi pada halaman-halaman yang hampir sejenis. Selain itu, pengunjung juga dapat mengetahui link mana yang telah ia klik sebelumnya jika ia ingin melihat kembali halaman tersebut karena ada sesuatu yang tadinya terlewatkan.

Cara ini merupakan override pada aturan link yang telah ada sebelumnya di template HTML. Jadi anda tidak perlu lagi mencari urutan aturan link di dalamnya. Cukup tambahkan aturan CSS berikut sebelum </head> di template HTML:
<style type='text/css'>
a:visited {color:#808080;text-decoration:none;}
</style>
Ganti #808080 dengan kode warna yang diinginkan. Ganti none dengan jenis properti text-decoration yang lain, misalnya underline (garis bawah) atau overline (garis atas), atau properti yang lain. But just remember, make it natural 'cuz kadang-kadang yang terlalu berlebihan malah tidak asyik .^_^

Tidak ada komentar:

Posting Komentar

KLIK DAN DAPAT KAN UANG