Download Template Plus UI + mode Translate v3

Hello sobat ICloudzer kali ini ini admin bakalan menjabarkan mengenai cara membuat efek animasi pada gambar di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Efek Animasi Gambar

Efek animasi gambar merupakan tampilan animasi bergerak yang di terapkan pada postingan gambar di blogger, efek animasi gambar akan secara otomatis berfungsi jika kamu menerapkan kode pembuat efek animasi pada postingan gambar yang bakal admin jabarkan sebentar lagi

Sedangkan kode yang di gunakan adalah Pure menggunakannya kode CSS saja, jika kamu paham akan class kode CSS kamu bisa atur elemen gambar apa saja yang ingin kamu terapkan dengan efek animasi bergerak pada gambar tersebut

Contoh Tampilan

Okay sobat dari pada penasaran dengan bagaimana kah contoh tampilan animasi bergerak pada gambar di blogger tersebut silahkan periksa menggunakan tombol di bawah ini yak

Periksa

Info: Bagaimana sobat dengan contoh tampilan dari animasi gambar tersebut, keren ya sobat

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin akan membahas cara menambahkan efek animasi gambar pada postingan di blogger, silahkan di baca dan di ikuti setiap arahan yang bakal admin jelaskan di bawah ini

1. Silahkan login ke blogger menggunakan akun google anda
2. Selanjutnya silahkan pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
3. Jika sudah silahkan cari kode kode ]]></b:skin>
4. kemudian taruh kode CSS di bawah tepat di atasnya

img,.pS img,.post img{animation:rahrubberB 1s}img:hover,.pS img:hover,.post img:hover{animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-moz-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;-webkit-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;  -o-animation:rahshaked .88s cubic-bezier(.35,.07,.19,.97) both;  transform:translate3d(0,0,0);  backface-visibility:hidden; perspective:1000px;}@keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-webkit-keyframes rahshaked { 10%, 90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@-moz-keyframes rahshaked {10%,90% { transform:translate3d(-1px,0,0)} 20%, 80% { transform:translate3d(2px,0,0)} 30%, 50%, 70% { transform:translate3d(-4px,0,0)} 40%, 60% { transform:translate3d(4px,0,0)}}@keyframes rahrubberB{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

5. Silahkan simpan template dan lihat bagaimana hasilnya