Yossshaaa! Pada kesempatan kali ini, saya akan membagikan tutorial mengenai cara memasang efek hover rubberBand di icon sidebar blog. Oh, iya, btw, apa itu efek hover rubberBand? Oke, efek hover rubberBand itu merupakan efek yang dapat mengubah warna sekaligus dapat menimbulkan efek memantul pada suatu objek atau elemen di blog atau website. Untuk lebih jelasnya mengenai efek hover ini, mungkin alangkah baiknya kamu melihat terlebih dahulu contohnya dengan menekan tombol result di bawah ini.

• Result

Oke, bagaimana? Sudah paham kan mengenai efek hover ini? Bila sudah dan mungkin kamu tertarik untuk memasang efek hover ini di sidebar blogmu, maka kamu dapat mengikuti tutorial saya kali ini. Baik, tanpa perlu basa basi lagi, simak tutorialnya di bawah ini.

Cara Memasang Efek Hover RubberBand di Icon Sidebar Blog

Sebelum kamu dapat memasang efek hover ini, pastikan kamu telah memasang icon dari FontAwesome pada judul siderbar blogmu. Jika belum, kamu dapat memasangnya terlebih dahulu seperti yang saya lakukan pada tutorial saya yang berjudul Cara Memasang Icon di Samping Judul Widget Blog.

Oke, kalau kamu sudah memasang icon pada judul sidebar blogmu, kamu dapat mulai memasang efek hover ini dengan langkah pertama, yaitu mengcopy kode di bawah ini.

animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
transition:all .6s

Lalu pastekan atau letakkan kode tersebut di dalam kode elemen sidebar h2:after atau sidebar h2:before, contoh pemasangannya seperti di bawah ini.

.sidebar h2:after{content:'\f005';
font-family:fontawesome;
font-size:1.2rem;
font-weight:normal;
float:right;
margin:0 0 0 15px;
color:#a4b0be;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
transition:all .6s}

Setelah itu, kamu buat kode pemanggil hover untuk sidebar h2:after atau sidebar h2:before tersebut. Kode pemanggil hover tersebut dapat kamu buat seperti contoh kode di bawah ini.

.sidebar:hover h2:after{
color:#f1c40f;
animation:rubberBand 1s}

Jika kamu telah selesai membuat kode pemanggil hover untuk sidebar h2:after atau sidebar h2:before, maka langkah selanjutnya yang harus kamu lakukan adalah mengcopy kode di bawah ini.

/* -------------------------------
ANIMATION
----------------------------------*/
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

Kemudian, kamu pastekan atau letakkan kode tersebut di bawah kode <style>.

Jika sudah, maka kamu dapat melakukan langkah terakhir dalam tutorial ini, yaitu dengan menekan tombol “Simpan” pada fitur Edit HTML template blogmu, dan lihat hasilnya.

Baik, sekiranya itu tutorial dari saya kali ini. Seperti biasa, bila kamu memiliki pertanyaan atau saran yang ingin kamu sampaikan kepada saya terkait tutorial ini ataupun blog ini, kamu dapat menyampaikannya dengan menuliskannya di kolom komentar diqsqus yang terletak di bawah tutorial ini. Semoga bermanfaat.