sering kita jumpai di blog sobat bloger kita yang penampilan linknya sangat menarik adapun ketika kita mengunjungi link tersebut kemudian berubah warna linknya . dan saya rasa anda pun juga bisa menerapkan / mengubah warna dan hover ( mouse over ) link pada blog anda . salah satunya yang paling menarik yaitu mengubah hover link menjadi tullisan miring ( italic ) , atau anda juga bisa menghilangkan underline ( garis bawah ) pada hover link di blog anda pada dasarnya . sebelum kita merubah / mengganti link di blog kita ada baiknya kalau anda tahu sedikit mengenai link ini . ada 3 macam jenis link diantaranya yaitu :
a:active
--> link yang belum di apa - apa in
a:visited
--> link yang sudah pernah di kunjungi / di klik
a:hover
--> link yang di di kunjungi pointer mouse ( belum di klik )
a:link
--> link ketika sedang di copas ,di copy.
mengubah warna link
lihat kode css di bawah :
a {color:red;}
mengubah hover link menjadi tulisan miring dan warna link berbeda
a:hover {color:blue;font-style:italic;}
untuk menghilangkan underline pada hover link tambahkan aturan css sebagai berikut :
{text-decoration:none;}
maka gabungan kode css di atas akan seperti berikut :
a{color:red;}
a:hover{color:blue;font-style:italic;text-decoration:none;}
dan kode css ini di letakkan di atas / sebelum kode ]]></b:skin> atau </head> di dalam template anda :
namun kode css di atas secara global dimana link link yang ada di blog anda mengikuti aturan css di atas , bila anda ingin mengtur css tersendiri maka di perlukan id ( # ) atau class ( . ) contoh :
a.linkSaya {color:red;}hasil css link di atas
a.linkSaya:hover {color:blue;font-style:italic;text-decoration:none;}
untuk penulisan html sebagai berikut :
<a class="linkSaya" href="http://www.id-mastony.blogspot.com/">hasil css link di atas </a>note : penulisan ini wajib pada mode Html
bagi anda yang ingin link visited tidak sama anda tinggal menambahkan aturan css sebagai berikut:
a:active { disini aturan css ...}
a:visited{disini aturan css ...}
a:hover{ disini aturan css ....}
dan sampai disini tutorial tentang warna dan hover link ini selesai
semoga bermanfaat .....jangan lupa likenya ...
Nice tutorial sob..kapan-kapan bakal saya terapkan nih di blog saya.
BalasHapusNice blog & Thanks :)
@topSpot : silahkan sob ,,,thanks
BalasHapusthx sob link dan pembelajaranya..
BalasHapus@casanova : ma - sama sob ,, dan silahkan di coba . .
BalasHapus