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.
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