Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

Cara Membuat Efek Hover pada Link Teks

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.

Style Your Blog!! dan Berilah Identitas Blog Kamu
Salam dari Problogiz

Check this is too :
7 Efek Hover Keren (CSS 3) pada Gambar

Artikel Terkait Lainnya:
Click here for comments

21 komentar

Keren sob, benar-benar mantap...Ijin save sob

REPLY

thanks sob, baru selesai hehe:)

REPLY

Wah, keren sob...
izin nyobak sob...
jangan lupa kunjungannya sob..
di tunggu.....

REPLY
Komentar ini telah dihapus oleh administrator blog.

wah.. recommended banget nih kang. thank ya dah share...

REPLY

wah keren dan menarik mas, izin untuk mempelajarinya yah.

REPLY

wah, thx infonya gan.
bermanfaat banget.
jangan lupa komen backnya di http://adeputra-pkp.blogspot.com

REPLY

Jika tanpa harus merubah/menambah kode CSS bisa gak mas..soalnya saya mau buat hover text itu cuma untuk link di posting tertentu saja..kira2 caranya bagaimana masnya?

REPLY

Saya nggak bisa bilang dah. Saya subscriber blog agan. Tapi baru sekarang benar-benar sempat belajar lagi. Mohon Ijin nyedot gan. Maklum sibuk terus, blog saya jadi terbengkalai. Kini saatnya belajar lagi, dari problogiz. dan kini saatnya pula bagi saya harus bilang "SEMPURNA"...

REPLY

Thnk's sobb...
http://nyook-at.blogspot.com/

REPLY

tolong dong preview nya agar pembaca bisa memilih teks hover mana yang bagus dan cocok dipasang di blog. thanks
www.jordanvengeance.com

REPLY

Keren, Saya langsung nyoba ah... terimakasih :)

REPLY

Berguna banget infonya

http://cobabacadong.blogspot.co.id/

REPLY

mantap mas,mapir balik ya www.zagan19.com

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|