Membuat Link Hover Efek Rolling Right - Salah satu trik SEO dalam optimasi blog yaitu dengan membuat atau menyertakan link pada artikel blog yang mengarah kehalaman berbeda dalam keterkaitan halaman yang sama, Tidak jauh berbeda dengan efek teks pada artikel sebelumnya tentang cara membuat efek teks jatuh pada tulisan yang dapat Anda baca pada tutorial berikut

Teks link tentang -

Namun kali ini link yang akan saya beri efek dengan style rolling right saat hover, karena link tersebut tidak banyak yang merubah efek hovernya, dan mayoritas masih menggunakan link hover default pada template yang digunakan, yang kurang lebih seperti ini kode jika dalam HTML template

a:link active {text-decoration:none;color:blue;}
a:link visited {text-decoration:none}
a:link hover {text-decoration:none;color:red;}

Jika kita perhatikan pengaturan kode tersebut hanya untuk memberikan efek warna saja pada link. a:link active merupakan untuk memberi efek auto warna saat Anda membuat internal link pada artikel, sedangkan a:link hover merupakan untuk membuat efek warna berbeda dari link active saat hover, singkatnya link dengan teks warna BIRU akan berubah efek warnanya menjadi MERAH saat hover.

Link hover effect image


Diartikel kali ini, saya akan memberikan sedikit efek berbeda pada link saat hover dengan Membuat Efek Rolling Right dalam artikel blog seperti ini




DEMO SHOW




<nav class="cl-effect-1">
<a href="/" data-hover="Sahabat"><span>Sahabat</span></a>
<a href="/" data-hover="Blogger"><span>Blogger</span></a>
<a href="/" data-hover="Tujuh-tujuh"><span>Tujuh-tujuh</span></a>
</nav>


CSS pembangun berikut saya susun dalam bentuk navigasi agar dapat menentukan kelas elemen HTML-nya, sehingga Anda bisa membuat link mana yang akan Anda buat efek rolling right pada halaman artikel Anda, link pada paragraf pertama, tengah atau akhir tulisan

Contoh efek hover -


nav a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  font-size: 1.35em;}

nav a:hover, nav a:focus {outline: none;}
.cl-effect-1 {position: relative;z-index: 1;}
.cl-effect-1 a {overflow: hidden;margin: 0 15px;}

.cl-effect-1 a span {
  display: block;
  padding: 10px 20px;
  background: #0f7c67;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;}

.cl-effect-1 a::before {
  position: absolute;
  top: 0;left: 0;
  z-index: -1;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #0f7c67;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(-25%);}

.cl-effect-1 a:hover span,
.cl-effect-1 a:focus span {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);}

Semoga tutorial ini dapat memberikan manfaat kepada semua sahabat pecinta SAHABAT BLOGGER 77 dalam menemukan inspirasi.
Terimakasih and happy blogging..

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Link Hover Efek Rolling Right
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 =

15 komentar

  1. mbk Devy memang selalu bisa kalau soal ginian. keren demonya..

    BalasHapus
  2. ilmu baru lagi nih...terima kasih sdh sharing

    BalasHapus
  3. wow... keren banget bos, apalagi demo ke 4, mantab...

    BalasHapus
  4. jadi semakin bervariasi ya internal linknya...keren sekali mbak..

    BalasHapus
  5. Setelah saya lihat seluruh DEMO Nya bagus dan keren membuat link hover efek rolling R
    ini yah Mabk Devy, saya coba terapkan di Navigasi saya, tapi nanti jika senggang waktu

    BalasHapus
  6. wew.. mantep ini.. bikin tambah berat loading page nggak mbak? :)

    BalasHapus
    Balasan
    1. saya tidak menggunakan permintaan kode script untuk CSS diatas mas, murni CSS jadi tidak berpengaruh pada speed load page, karena hanya mengubah tampilan link hover default bawaan template

      Hapus
  7. wih keren2terus nih artikel dari mbak devy bikin ngiler ingin mencobanya.thx tutornya mbak

    BalasHapus
  8. Bagus sekali Mbak Devy, ini cocok untuk membuat tampilan menu blog di bagian header ya. biar yang nge-hover terkaget-kaget sambil berdecak kagum.

    BalasHapus
    Balasan
    1. salah satunya sudah saya terapkan mbak pada menu navigasi, hanya efeknya saya ubah menjadi menggulung ke-atas

      Hapus
  9. mantap ini mbak, saya coba dulu mbak..
    emang mbak devy mantap

    BalasHapus
  10. Assalamu'alaikum All ... makasih banyak sangat membantu :)

    BalasHapus
  11. kalau cara bikin menu paling atas (my diary , artikel , profile , arsip file , follow) kayak blog mas ini gmaa cra nya mas ?

    BalasHapus
    Balasan
    1. Anda hanya ingin bertanya doang atau sekedar iseng singgah disini,
      1. bertanya bukan ditempat yang seharusnya dan itu tidak menggunakan kata maaf.
      2. dibawah judul posting ini, sengaja saya sertakan nama dan tanggal publis artikel, dan paling bawah postingan juga ada nama dan gambar admin, bahkan dalam balasan komentar saya beri tanda dengan title "Penulis" dan itu juga ada nama saya,
      lalu sejak kapan Anda pernah mendengar kalau nama Devy Indriyani itu nama seorang cowok, ini tandanya Anda tidak menghargai karya orang lain, tanpa membaca langsung ngeramein komen.

      Hapus

  • 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