Cara Membuat Efek Goyang Mantul Bounce Gambar Postingan Blog

Mantul Bounce Gambar Postingan. Mempercantik tampilan postingan blog agar terlihat menarik dan tidak membosankan pengunjung adalah satu satu tips yang perlu dicoba salah satunya dengan memberika efek bergoyang mantul pada setiap gambar yang ada pada halaman postingan blog. Dimana dengan adanya efek Goyang Mantul Bounce ini gambar akan menjadi seolah-olah hidup dan terlihat menarik tidak monoton. 

Untuk menerapkan efek goyang mantul Bounce pada gambar postingan blog caranya sangat mudah sekali sobat blogger. Hanya dengan menambah scrip code goyang mantul pada kode HTML Themplate dan sedikit tambahan kode pemanggil efek bounce yang diterapkan pada setiap gambar postingan maka secara otomatis setiap gambar ketika diakses atau disorot akan goyang mantul Bounce. 

DOWNLOAD SOURCE CODE GOYANG MANTUL BOUNCE

Pertama-tama silahkan masuk ke Dasboard Blogger, pilih menu Tema kemudian pilih Edit HTML. Setelah itu cari kode </head>. Untuk memudahkan pencarian gunakan filture pencarian dengan menekan kombinasi tombol keyboard CTRL + F. 

Setelah kode </head> ditemukan pastekan kode berikut ini tepat di atas kode </head> kemudian klick Simpan Tema untuk menyimpan setelan. 

 
  <style>
  .watermark{position:relative}.watermark::before{content:"Berbagi Tutorial Online";color:black;font-size:14px;position:absolute;right:10px;bottom:10px;border:1px solid #000;background-color:#fff;padding:4px;opacity:.4;height:14px;line-height:14px}.goyang:hover{animation:shakeOf .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}.mantul{margin:10px 0}.mantul:hover{animation:bounceOn .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000em}@keyframes shakeOf{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 shakeOf{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 bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}@webkit-keyframes bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}
  </style>

Sebagai contoh Admin akan memberikan efek Goyang Mantul Bounce pada salah satu postingan yang sebelumnya sudah Admin publikasikan dengan tanpa adanya efek Goyang Mantul Bounce ini.



Untuk menambahkan efek Goyang Mantul Bounce Pada Gambar tambahkan kode berikut ini pada wal dan akhir source gambar.

 
  <div class='mantul'>
  <img src=" LINK SOURCE GAMBAR>
  </div>

Pada Screenshot di atas admin lupa menambahkan kode penutup sehingga muncul notifikasi eror kode saat postingan dicoba publikasikan ulang. Perhatikan Screenshot di bawah ini Admin sudah menambahkan kode penutupnya.


Untuk melihat hasilnya sendiri tentunya ketika kalian pada mengakses halaman tutorial ini gambar dari postingan akan bergerak-gerak goyang mantul bounce. 

Demikianlah Tutorial Cara membuat Efek Goyang Mantul Bounce pada Gambar Postingan Blog, bagi yang merasa tertarik langsung saja coba praktekkan pada blog kalian.