10 Efek Hover Keren pada Teks Link

Membuat Efek Hover pada Link Teks bisa bermacam-macam type dan jenisnya, dari beragam variasi style color font/warna teks yang dikombinasi dengan  type / style efek hover pada link teks. Disini saya telah membuat 10 Efek Hover Keren pada Teks Link yang bisa Anda pilih salah satu untuk diterapkan di blog Anda. Dengan menggunakan kode CSS, tutorial Desain Blog kali ini akan membagi tip cara membuat bermacam varisasi atau type efek hover pada teks link di Blogger.

Walaupun ada banyak dan beragam efek link hover yang umum, unik, berlebihan, bahkan aneh yang mungkin Anda pernah temukan di dunia web, saya mencoba menghindari itu semua dengan memberikan desain efek hover yang keren dan berharap sesuai dengan kebutuhan blogger. Ada 10 contoh efek hover link text keren dibawah, seperti Efek Hover Rainbow, Efek Hover Background Color Undreline, Efek Hover Teks Links  Menampilkan URL, Efek Blur, Efek Teks Link Berpijar/Menyala, Efek Shadow Hover Teks Link, Bold dan Italics Hover.

Styling Links

Template Blogger pada dasarnya menggunakan Cascading Style Sheets ("CSS") untuk menentukan bagaimana halaman seharusnya ditampilkan. Sebuah link dapat ditata dengan properti CSS (misalnya color, font-family, background, dll).

Ada empat link style atau stylesheet dasar untuk link:

1. a:link { } link yang normal, belum dikunjungi
2. a:visited { } link yang telah dikunjungi
3. a:hover { }  link ketika user mengarahkan mouse di atasnya
4. a:active { } link yang pada saat itu diklik

Ada beberapa contoh type/style link hover yang umum digunakan, misalnya :

text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink; font-weight: normal; font-weight: bold; font-style: normal; font-style: italic;background-color: #........; dan seterusnya.

Cara Pemasangan Efek Hover Link Teks pada Template Blogger

• Masuk Blogger > Template > Edit HTML
• Lanjutkan > Tekan F3 > cari tag ]]></b:skin>
• Copy salah satu kode CSS Efek Hover Link Teks dibawah, dan letakkan diatas tag ]]></b:skin>

Jika Anda ingin menambah Efek Hover untuk Judul Posting, tambahkan kode CSS hover pada .post h3 a:hover {...}

Cara Penulisan Efek Hover Link Teks pada Postingan atau Kode HTML Efek Hover

Gunakan kode html berikut untuk membuat link hover teks di postingan Anda

<a class="type hover" href="#">TEXT LINK</a>

10 Efek Hover Keren pada Teks Link

Arahkan mouse Anda diatas teks untuk melihat demo efek hover text.

Note : Semua Efek Hover ini akan bekerja sempurna apabila Anda menggunakan browser Chrome, sebab ada sebagian efek yang tidak support oleh browser lain, seperti efek blur, efek rainbow, efek shadow.

Type 1 (support only Chrome)
Efek Hover Rainbow Link Teks

a.type1:link { color:black;text-decoration: none;}
a.type1:visited { color:grey; }
a.type1:hover { 
 -webkit-background-clip: text;
 color: white;
 -webkit-text-fill-color: transparent;
   background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
 background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
 background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
 background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
 background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
 }

Type2 (all browser support)
Efek Hover Background Color Teks Links

a.type2:link {text-decoration: none;}
a.type2:visited { color:black; }
a.type2:hover {background: #e06c1f; color: white; }

Type3 (all browser support)
Efek Hover Background Color Undreline Teks Links

a.type3:link {
  color: #222;
}
 a.type3:visited {
    display: block;
    color: black;
}
  a.type3:hover {
  color: white;
  background: #333;text-decoration: underline;
}

Type4 (all browser support)
Efek Hover Teks Links Menampilkan URL

a.type4:link {text-decoration: none;}
a.type4:visited { color:blue; }
a.type4:hover:after { content: " (" attr(href) ") "; }

Type 5 (Chrome, Firfox, Safari)
Efek Hover Teks Links Shadow

a.type5:link {text-decoration: none;}
a.type5:visited { color:blue; }
a.type5:hover {text-shadow: 2px 2px 2px #aaa;}

Type 6 (all support)
Efek Hover Teks Links Bold Caps

a.type6:link {text-decoration: none;}
a.type6:visited { color:black; }
a.type6:hover {font-weight: bold; font-variant: small-caps;}

Type 7 (all support)
Efek Hover Teks Links Top Bottom Border

a.type7:link {text-decoration: none;}
a.type7:visited { color:blue; }
a.type7:hover {color: #e06c1f;border-bottom: solid 1px; border-top: solid 1px;}

Type8 (Chrome, Firefox)
Efek Hover Teks Links Shadow Berpijar

a.type8:link {color:black;text-decoration: none;}
a.type8:visited { color:grey; }
a.type8:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #D8133D,
    0px 0px 3px #D8133D,
    0px 0px 5px #e06c1f,
    0px 0px 30px #e06c1f,
    0px 3px 50px #e06c1f;
}

Type 9 (only Chrome)
Efek Hover Teks Links Blur

a.type9:link  {text-decoration: none; color: black; }
a.type9:visited { color:grey; }
a.type9:hover{
    -webkit-filter: blur(1px) grayscale(1);
    opacity: .8; /* fallback */
}

Type 10 (all browser support)
Efek Hover Teks Links Italics

a.type10:link  {text-decoration: none; color: #3912AF; }
a.type10:visited {color:black;}
a.type10:hover{color: blue;
    font-style: italic;
}

Kostumisasi:
Untuk merubah warna teks dan hover Anda bisa merubahnya pada code { color:#......; }
Gunakan Code Warna HTML untuk pedoman warna-warna teks

Gimana Sob? ada yang cocok?

Pilih salah satu kode CSS Efek Hover Keren pada Teks Link dan pasang di blog sobat, dan buat blog Anda lebih unik dan menarik.

Sumber : problogiz.blogspot.com

Artikel terkait :