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
o Masuk Blogger > Template > Edit HTML
o Lanjutkan > Tekan F3 >
cari tag ]]></b:skin>
o 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
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);
}
a.type2:link
{text-decoration: none;}
a.type2:visited {
color:black; }
a.type2:hover {background:
#e06c1f; color: white; }
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.
Style
Your Blog!! dan Berilah Identitas Blog Kamu
Salam dari Problogiz
