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 ]
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
Contoh Susunan CSS didalam 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 

6 Responses to "Membuat Variasi Link Ketika Mouse Hover"

  1. Nah ini nih yang harus saya pelajari kang :) biar Link nya lebih bervariasi .hhe

    ReplyDelete
  2. Bisa di simak pelan-pelan aja kang.... he,, he,he,

    ReplyDelete
  3. Saya simpan dulu Mas...
    Nanti lain kali mau di terapkan...

    ReplyDelete
  4. 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 :'(
    saya 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

    ReplyDelete
  5. sip ini kang, kayaknya penulis sudah menuangkan ide pada blognya, saya suka sebuah tips yang langsung bisa kelihatan hasilnya.. happy blogging mas

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin