03 June 2019
Cara Membuat Efek Goyang Mantul Bounce Gambar Postingan Blog
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>
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. Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News
Artikel Terkait: