Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger

Daftar isi [Tampil]
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.

Show comments
Hide comments

5 Komentar untuk "Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger"

  1. Oh, ternyata begitu ya cara nya,terima kasih

    BalasHapus
    Balasan
    1. oke gan, terima kasih sudah berkunjung :)

      Hapus
  2. Wah keren nih script nya. Kalau untuk pic dalam artikel. Bisa juga gan?

    BalasHapus
    Balasan
    1. tentu bisa gan, silahkan implementasikan pada tag img postingan

      Hapus
    2. lalu letakan kode animasinya pada CSS img post tersebut.

      Hapus
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With