Membuat Variasi Link Dikala Mouse Hover
Sebuah link biasanya dibentuk untuk mempergampang terusan baik itu ke luar atau ke antar halaman disebuah website/blog. Bila di Blog biasanya kita membuat sebuah link untuk mempergampang pengunjung untuk mengakses halaman tertentu atau artikel dengan kategori tertentu.
Kalau kita perhatikan saat kita melihat sebuah link di blog/website biasanya link tersebut mempunyai variasi tertentu, misal ada sebuah blog yang mempunyai link/navigasi yang saat mouse di arahkan (hover) ke sajian tersebut, background link berubah, atau warna text linknya yang berubah dll.
Baca juga : Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog
Menurut Saya hal tersebut yaitu sebuah variasi link, kita dapat saja membuat banyak variasi link dengan warna atau dampak – dampak yang tidak sama contohnya kita mempunyai navigasi dengan 10 menu, kita dapat mempersembahkan dampak hover yang tidak sama – beda atau berwarna – warni pada setiap menu.
Untuk Membuat Variasi Link Ketika Mouse Hover, maka kita cukup membuat script CSS dengan susunan ibarat Berikut :
a.ex1:hover, a.ex1:active {font-size: 150%; background: green; color: white;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex6:hover, a.ex6:active {text-decoration: underline;}
/*ex1 – ex 6 Merupakan Nama Class, Anda dapat merubah nama class sesuai harapan /*
Selanjutnya kita cukup melaksanakan pemanggilan class tersebut, teladan :
p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
Untuk lebih jelasnya Anda dapat mengcopy script dibawah ini kemudaian simpan dalam format HTML dan buka memakai Web Browser.
misal Script :
<html>
<head><title>Hover Link melaluiataubersamaini Variasi</title>
<style type="text/css">
a.ex1:hover, a.ex1:active {font-size: 150%; background: green; color: white;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex6:hover, a.ex6:active {text-decoration: underline;}
</style>
<body>
<p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
<p><a class="ex2" href="">This link changes font-size</a></p>
<p><a class="ex3" href="">This link changes background-color</a></p>
<p><a class="ex4" href="">This link changes font-family</a></p>
<p><a class="ex5" href="">This link changes text-decoration</a></p>
</body>
</html>
[Baca juga : Teknik cepatdangampang Membuat Navigasi Blog Berwarna - Warni ]
Kalau kita perhatikan saat kita melihat sebuah link di blog/website biasanya link tersebut mempunyai variasi tertentu, misal ada sebuah blog yang mempunyai link/navigasi yang saat mouse di arahkan (hover) ke sajian tersebut, background link berubah, atau warna text linknya yang berubah dll.
Baca juga : Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog
Menurut Saya hal tersebut yaitu sebuah variasi link, kita dapat saja membuat banyak variasi link dengan warna atau dampak – dampak yang tidak sama contohnya kita mempunyai navigasi dengan 10 menu, kita dapat mempersembahkan dampak hover yang tidak sama – beda atau berwarna – warni pada setiap menu.
Untuk Membuat Variasi Link Ketika Mouse Hover, maka kita cukup membuat script CSS dengan susunan ibarat Berikut :
a.ex1:hover, a.ex1:active {font-size: 150%; background: green; color: white;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex6:hover, a.ex6:active {text-decoration: underline;}
/*ex1 – ex 6 Merupakan Nama Class, Anda dapat merubah nama class sesuai harapan /*
Selanjutnya kita cukup melaksanakan pemanggilan class tersebut, teladan :
p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
Untuk lebih jelasnya Anda dapat mengcopy script dibawah ini kemudaian simpan dalam format HTML dan buka memakai Web Browser.
misal Script :
<html>
<head><title>Hover Link melaluiataubersamaini Variasi</title>
<style type="text/css">
a.ex1:hover, a.ex1:active {font-size: 150%; background: green; color: white;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex6:hover, a.ex6:active {text-decoration: underline;}
</style>
<body>
<p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
<p><a class="ex2" href="">This link changes font-size</a></p>
<p><a class="ex3" href="">This link changes background-color</a></p>
<p><a class="ex4" href="">This link changes font-family</a></p>
<p><a class="ex5" href="">This link changes text-decoration</a></p>
</body>
</html>
[Baca juga : Teknik cepatdangampang Membuat Navigasi Blog Berwarna - Warni ]
Bila Anda ingin menerapkannya di blog, maka Anda cukup melaksanakan langkah – langkah diberikut :
1. Masuk ke acoount blogger masing – masing
2. Copy script CSS diatas dan taruh pada susunan CSS yang ada di template
1. Masuk ke acoount blogger masing – masing
2. Copy script CSS diatas dan taruh pada susunan CSS yang ada di template
3. Setiap kali Anda ingin membuat variasi link misal, didalam sebuah artikel
blog anda cukup menyisipkan nama “class” yang ada didalam css
Demo Variasi Link Ketika Mouse Hover
Post a Comment for "Membuat Variasi Link Dikala Mouse Hover"