Teks Link Hover Multi Effect - Link terbentuk menggunakan tag <a dengan atribut href seperti ini: <a href="http://sahabatblogger77.blogspot.com">Teks</a>, maka dengan penyusunan elemen CSS yang kita letakkan pada halaman Template, berbagai macam tampilan effect link bisa kita buat dalam satu halaman posting saat teks link di hover seperti ini:




DEMO SHOW




Yang menjadi kendalanya adalah bagaimana membuat ragam effect (multi effect) pada teks link dalam satu halaman posting artikel.?. Kita ambil penyusunan CSS efek hover link yang biasanya terdapat pada struktur Template seperti ini:


a:link{max-width:100%;color:blue;text-decoration:none}
a:visited{color:blue}
a:hover{color:red}

Dengan susunan element CSS seperti diatas, maka semua teks yang dibuat menjadi link akan berubah warna menjadi BIRU, dan teks berganti warna MERAH jika di hover. Pertemuan kali ini saya akan coba memberikan 7 Effect Hover Pada Link yang bisa kita terapkan sekaligus dalam 1 halaman posting. Singkatnya jika Anda membuat atau menyisipkan 3 URL-link dalam postingan (internal link), maka kita bisa membuat effect yang berbeda-beda antara link yang satu dengan link yang lain saat teks di hover.


Effect hover teks link



Anda temukan kode ]]></b:skin> di Template Anda, lalu letakkan semua kode CSS berikut tepat diatasnya. kode lengkapnya seperti ini:



/* Link Style Hover Multi Effect
Edition line: page one experiment show
Visit - http://sahabatblogger77.blogspot.com
Modified by. Devy Indriyani at March 15, 2015 */
.effect-1 {
  border-bottom: 1px solid #c9e27f;
  box-shadow: inset 0 -3px 0 #c9e27f;
  color: rgba(15, 35, 59, 0.55);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  padding: 2px 2px 0 2px}

.effect-1:hover {background-color: #c9e27f;}
.effect-2 {
  color: blue;
  -webkit-transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1);
  -moz-transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1);
  transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1)}

.effect-2:hover {box-shadow: inset 0 -1.15em 0 #f1e12d;color:#111}
.effect-3,.effect-4 {color: #3588b4;position: relative;padding-bottom: 2px}
.effect-3:after,.effect-4:after {
  content: '';position: absolute;bottom: 0;left: 0;height: 2px;
  background-color: #6ebde7;width: 0%;display: block;
  -webkit-transition: width .5s ease-in-out;
  -moz-transition: width .5s ease-in-out;
  transition: width .5s ease-in-out}

.effect-3:hover, .effect-4:hover {color: black}
.effect-3:hover:after, .effect-4:hover:after {width: 100%}
.effect-4 {color: #e76ea7;z-index: 3}
.effect-4:after {background: rgba(231, 110, 167, 0.4);height: 1.25em;z-index: -1}
.effect-4:hover {color: black}
.effect-5 {
  color: #e44040;padding-bottom: 2px;border-bottom: 0px solid black;
  -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;padding-top: 2px;border-top: 0px solid black}

.effect-5:hover {border-bottom-width: 2px;border-top-width: 2px}
.effect-6 {color: #994cb9;position: relative;padding-bottom: 2px}
.effect-6:after {
  content: '';height: 2px;background: #742794;width: 0;
  position: absolute;bottom: 0;left: 0}

.effect-6:hover:after {
  width: 100%;
  -webkit-animation-duration: .6s;
  -moz-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-name: bordergrow;
  -moz-animation-name: bordergrow;
   animation-name: bordergrow;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
   animation-iteration-count: 1}

.effect-7:hover {
  -moz-transform:rotateY(-360deg);
  -webkit-transform:rotateY(-360deg);
  transform:rotateY(-360deg);
  background: #660000;
  box-shadow: inset 0px 2px 0 0 yellow;
  color:#fff}

.effect-7 {
  background: red;
  -webkit-transition: 1.3s;-webkit-transform-style: preserve-3d;
  -moz-transition: 1.3s;-moz-transform-style: preserve-3d;
  transition: 1.3s;transform-style: preserve-3d;
  padding:2px 4px;color:aqua}

@-webkit-keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}
@-moz-keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}
@keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}



Pada masing-masing pengaturan CSS sudah saya beri tanda dengan kode effect-1, effect-2, effect-3 dan seterusnya dan dengan efek yang berbeda-beda pula. Cara menggunakannya, Anda cukup panggil salah satu efek yang Anda sukai atau menerapkan efeknya sekaligus dengan menambahkan atribut class pada tag <a saat Anda menulis artikel. Contoh seperti ini:

<a href="http://URL-link Anda" class="effect-1">SAHABAT BLOGGER 77</a>


Cukup mudah bukan.? hehe..!! sambil mencoba-coba ke 7 efek diatas, baca juga yuk beberapa desain daftar isi ala SAHABAT BLOGGER 77 dibawah ini:

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Teks Link Hover Multi Effect
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

38 komentar

  1. Untuk urusan script saya gak ngeh ni sob?

    BalasHapus
  2. idenya sangat kreatif, ayo lanjutkan terus, ngopi lagi :))

    BalasHapus
  3. keren ... dan memang setiap main kesini pulangnya selalu membawa ilmu baru ...

    BalasHapus
    Balasan
    1. mumpung lagi musim buah ilmu mas, jadi siapa saja yang main kesini pasti Devy bekalin oleh-oleh untuk dibawa pulang. hehe..!!

      Hapus
  4. sip dah ,,, lngsung tak coba yah ...
    sy suka yg centered border grow effect ... cakep hover nya kya adminnya .... (f) heheh

    BalasHapus
    Balasan
    1. eheheeemmmmm....saya sih nunggu aja teks link jadi seperti apa gitu?...heeee

      Hapus
  5. Canggih bingit mbak Dev. Mbak, kalo yg quote mau dikasi gambar tanda kutip kira2 gmn ya?

    BalasHapus
    Balasan
    1. tambahkan kode icon logo saja mbak, takutnya kalau dibuat dengan gambar akan membuat loading blog semakin berat. mbak bisa tambahkan kode CSS seperti ini pada area dimana quote tersebut diatur:

      span {
      font: bold 75px/normal Verdana, sans-serif;
      content: '\201C';
      text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
      position: absolute;
      }

      Hapus
  6. keren mnak Background slides in from left effect, yang warna pink

    BalasHapus
  7. keren mba, cuman saya kurang begitu berminat buat mencobanya.saya kasih tepuk tangan aja deh buat mba devy hehe
    (h)

    BalasHapus
  8. Bagus banget efek hovernya mba.. saya suka yang efek Background slides in from left effect.. tapi hanya untuk text yang ber link ya mba ;( , kalo untuk teks no link bisa gak, seperti untuk teks numbering atau bullets :-?

    BalasHapus
    Balasan
    1. gunakan elemen deklarasi class text, lalu atur nilai hovernya dengan effect yang mas inginkan.

      .text {
      color:#e06666;
      font:bold 14px/normal Arial;
      }

      .text:hover {
      color:blue;
      // Letakkan CSS Background slides in from left effect disini,,,
      ....
      }

      Hapus
  9. udah disimpan ditemplate, prakteknya baru percobaan di kunyit nanti diperbaiki sama nenk devy yah, trims ya

    BalasHapus
    Balasan
    1. Ok dech teh, insyaAllah kalau ada masalah atau kode yang kurang dimengerti, Devy siap meralat semuanya sampai sempurna, hehe..!!

      Hapus
  10. efeknya keren-keren, ada yang bisa muter segala :)

    BalasHapus
  11. Ini jg keren mbak... thank's sharingnya...

    jangan lupa folback blog aktivis adsense ya mba... thank's

    BalasHapus
  12. wahhh,, keren ya mbak jadinya.. ijin nyoba dulu mbak.. bungkus..

    BalasHapus
  13. efek nya keren keren gan untuk link teks nya, link teks di blog ane kagak kelihatan gan, repot juga ane hahahah :)

    BalasHapus
    Balasan
    1. makanya dipasang dil...baca keseluruhan, pelajari dengan pelan lalu terapkan

      Hapus
  14. tutorial menarik untuk membuat hover multi effect

    BalasHapus
  15. saya suka nih hover efect, biar makin betah yang mampir di blog saya (h)

    BalasHapus
  16. keren ya jadi warna warni gitu, ijin nyoba deh :)

    BalasHapus
    Balasan
    1. silahkan mbak...saya wakilkan dulu mbak devynya...dia lagi bikin kopi di belakang...hehehee

      Hapus
  17. Saya juga pakai link hover mba, tapi aneka warna bergantung posisinya :)

    BalasHapus
    Balasan
    1. kayak link pelangi ya mas...tinggal pilih sih mana yang lebih menarik untuk kita pakai.

      Hapus
  18. memang kalau masalah coding sahabat saya yang satu ini luar biasa. yang saya salut itu adalah idenya dev, dan ide itu mahal dan gak bisa dimabil orang, kecuali kamu yang membagikan dan baru dipost ulang ma yang lainnya.

    sementara untuk teks link hover itu menarik dan sangat baik kalau dimasukkan dalam posting blog sehingga bisa membuat daya tarik tersendiri bagi posting tersebut. mana cara penerapannya juga gak ribet, tinggal milih efek 1 sampai tujuh, alias mana yang kita sukai atau bisa pasang semua dan tinggal memvariasikannya dalam postingan. padahal penerapan efek hover dan transisi ya, tinggal kita mengembangkan mau diaplikasikan kemana. ok saya pelajari dulu ya....hanya satu kata...#salute.

    BalasHapus
    Balasan
    1. kayak di iklan-iklan di TV tuh mbah, idenya siapa.? Cosmos, hehe..!!

      jadi hanya untuk mempermudah pengunjung setia SB-77 saja sih mbah awalnya, kalau yang main kesini kan selalu pusing tuh di jejelin dengan kode-kode mulu, kali aja ada yang mau praktek dan lihat hasilnya, kan bisa tersenyum sendiri kalau ada yang lucu jika link posting mereka di hover.

      Hapus
  19. teks link hovernya keren. bicara soal design blog memang selalu menarik dan selalu berkembang karena css sekarang banyak versinya. salam blogwalking sobat

    BalasHapus
  20. .Tuh kan, super selalu artikelnya mbak devy ini. .Teks link hovernya super keren juga.
    .Jadi bingung mau masang yang mana aja dari yang sudah mbak devy share. :-?

    BalasHapus
  21. kira2 apa masalhnya ya ko gak jalan?
    ud tk panggil classnya.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK