Cara Membuat Logo Header Bergoyang Di Blogger

Cara Membuat Logo Header Bergoyang Di Blogger - Dikesempatan kali ini saya ingin membagikan tuorial sederhana untuk mempercantik tampilan logo header  sahabat disini saya menggunakan template Viomagz Buatan Mas Sugeng buat sahabat yang menggunakan template lain silahkan untuk menyesuaikan saja

Tidak hanya memberika kesan menarik dan tidak membuat bosan dengan cara Membuat Logo Header Begoyang - goyang ini juga dapat membuat pengunjung blog sahabat betah untuk berlama - lama didalam blog sahabat

Cara Membuat Logo Header blog bergoyang ini kita menggunakan animasi shake dan saya sudah menerapkan nya terlebih dahulu dan jika sahabat ingin mencobanya silahkan klik logo header blog ini

Tahap Pemasangan Animasi Shake Atau Efek Bergoyang Pada Header Blog

1. Silahkan sahabat masuk ke dashboard blogger 
2. Silahkan klik Tema 
3.  klik Edit HTML
4.  Silahkan cari kode dibawah ini

   .img-thumbnail {
   width: 180px;
   height: 120px;
   }

5. Pastekan kode dibawah ini setelah kode di atas

   .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); }
   }

6. Kemudian simpan Tema.

Kesimpulan

Tutorial kali ini sangatlah simple dan mudah untuk diterapkan terutama di template viomagz, sekian postingan kali ini semoga bermanfaat terimakasih