VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger

Serieswans.com - Hallo kawan blogger semua, pada kesempatan kali ini saya akan berbagi tutorial mengenai cara memasang atau membuat animasi Shake atau efek Goyang pada objek gambar di blog. untuk caranya ini sangat simple dan bisa anda terapkan pada blog anda sendiri dengan sangat mudah.

Tak hanya memberikan kesan menarik dan tidak membosankan, dengan kita memasang animasi shake ini mungkin tidak akan membuat pengunjung anda merasa bosan dan jenuh melihat tampilan blog anda. jadi buatlah tampilan blog anda semenarik mungkin.

Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger

Animasi Shake ini juga sudah saya terapkan pada blog serieswans, menurut saya tidak memberatkan loading blog anda. tutorial ini juga saya buat karena beberapa hari yang lalu, ada seseorang yang menghubungi saya lewat email, mengenai minta di buatkan tutorial memasang animasi shake pada blog. jadi saya coba meluangkan waktu untuk membuat tersebut. oke kita langsug saja ke tutorialnya.

Cara Memasang Animasi Shake atau Efek Goyang di Blog 

  • Login terlebih dahulu ke akun blog anda
  • Setelah masuk Dashboard Blogger, silahkan pilih Tema atau Template => Edit HTML
  • Silahkan anda tentukan terlebih dahulu mau memasangnya dimana, contohnya saja pada header.
  • Kemudian tekan cari kode .header img { dan salin script di bawah ini.

.header img:hover{animation:goyangin 1s;animation-iteration-count: infinite;}
@keyframes goyangin {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

  • Letakan di bawah kode tersebut.
  • Setelah itu simpan Tema dan lihat hasilnya.

Anda juga  bisa memasangnya di tempat lain selain pada header. entah itu pada sidebar ataupun pada menu postingannya. silahkan anda implementasikan dan kreasikan sendiri.

Nah, mungkin itu saja artikel kali ini mengenai Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger. jika anda mempunyai pertanyaan atau belum paham, silahkan komen di bawah ini. semoga bermanfaat dan membantu anda.

5 komentar

5 komentar

  • ./X3NUX
    ./X3NUX
    November 03, 2019
    Wah keren nih script nya. Kalau untuk pic dalam artikel. Bisa juga gan?
    • ./X3NUX
      Kurniawan
      November 04, 2019
      tentu bisa gan, silahkan implementasikan pada tag img postingan
    • ./X3NUX
      Kurniawan
      November 04, 2019
      lalu letakan kode animasinya pada CSS img post tersebut.
    Reply
  • Unknown
    Unknown
    Oktober 28, 2019
    Oh, ternyata begitu ya cara nya,terima kasih
    • Unknown
      Kurniawan
      Oktober 28, 2019
      oke gan, terima kasih sudah berkunjung :)
    Reply