-->

Cara Memasang Animasi Shake atau Goyang pada Gambar di Blogger

Daftar Isi [Tampilkan]
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.

Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 5 )
    Tutup Komentar

    5 Komentar

    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
    • 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.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!