Membuat Variasi Link Ketika Mouse Hover
Sebuah link biasanya dibuat untuk mempermudah akses baik itu ke luar atau ke antar halaman disebuah website/blog. Bila di Blog biasanya kita membuat sebuah link untuk mempermudah pengunjung untuk mengakses halaman tertentu atau artikel dengan kategori tertentu.
Kalau kita perhatikan ketika kita melihat sebuah link di blog/website biasanya link tersebut memiliki variasi tertentu, misal ada sebuah blog yang memiliki link/navigasi yang ketika mouse di arahkan (hover) ke menu 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 adalah sebuah variasi link, kita bisa saja membuat banyak variasi link dengan warna atau efek – efek yang berbeda misalnya kita memiliki navigasi dengan 10 menu, kita bisa memberikan efek hover yang berbeda – beda atau berwarna – warni pada setiap menu.
Untuk Membuat Variasi Link Ketika Mouse Hover, maka kita cukup membuat script CSS dengan susunan seperti 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 bisa merubah nama class sesuai keinginan /*
Selanjutnya kita cukup melakukan pemanggilan class tersebut, contoh :
p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
Untuk lebih jelasnya Anda bisa mengcopy script dibawah ini kemudaian simpan dalam format HTML dan buka menggunakan Web Browser.
Contoh Script :
<html>
<head><title>Hover Link Dengan 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 : Cara Mudah Membuat Navigasi Blog Berwarna - Warni ]
Kalau kita perhatikan ketika kita melihat sebuah link di blog/website biasanya link tersebut memiliki variasi tertentu, misal ada sebuah blog yang memiliki link/navigasi yang ketika mouse di arahkan (hover) ke menu 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 adalah sebuah variasi link, kita bisa saja membuat banyak variasi link dengan warna atau efek – efek yang berbeda misalnya kita memiliki navigasi dengan 10 menu, kita bisa memberikan efek hover yang berbeda – beda atau berwarna – warni pada setiap menu.
Untuk Membuat Variasi Link Ketika Mouse Hover, maka kita cukup membuat script CSS dengan susunan seperti 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 bisa merubah nama class sesuai keinginan /*
Selanjutnya kita cukup melakukan pemanggilan class tersebut, contoh :
p><a class="ex1" href="">This link changes color, Font size, And Background</a></p>
Untuk lebih jelasnya Anda bisa mengcopy script dibawah ini kemudaian simpan dalam format HTML dan buka menggunakan Web Browser.
Contoh Script :
<html>
<head><title>Hover Link Dengan 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 : Cara Mudah Membuat Navigasi Blog Berwarna - Warni ]
Bila Anda ingin menerapkannya di blog, maka Anda cukup melakukan langkah – langkah berikut :
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
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
Nah ini nih yang harus saya pelajari kang :) biar Link nya lebih bervariasi .hhe
ReplyDeleteBisa di simak pelan-pelan aja kang.... he,, he,he,
ReplyDeleteSaya simpan dulu Mas...
ReplyDeleteNanti lain kali mau di terapkan...
amboii, memahami CSS itu gak tamat-tamat yah. mau bervariasi dikit hrus berkutat dengan CSS yaaa. >_< kepala saya mulai bertebaran apa gitu rasanya mas ahmad :'(
ReplyDeletesaya belum pernah sih buat link ke artikel terkait di dalam postingan. yg bentuknya 'baca juga' seringnya nyimpan link di kalimat tertentu aja :D
bagus mas tutorialnya, kreatif pisang euyy :D
ups.. teknis banget :)
ReplyDeletesip ini kang, kayaknya penulis sudah menuangkan ide pada blognya, saya suka sebuah tips yang langsung bisa kelihatan hasilnya.. happy blogging mas
ReplyDelete