Tutorial

  • Android
  • Blogger
  • Canon
  • Epson
  • Komputer
  • Laptop
  • MedSos
  • ByPass FRP Tools
  • Berbagi Tutorial in Google News
  • Berbagi Tutorial on Facebook
  • Berbagi Tutorial on Instagram
  • Berbagi Tutorial on Twitter
  • Berbagi Tutorial on Youtube
  • Berbagi Tutorial on Tumbrl
  • Berbagi Tutorial on Wix
  • Berbagi Tutorial on Linkdin
  • Berbagi Tutorial on KASKUS
  • Berbagi Tutorial on MEDIUM
  • List Blog Partner
  • Open Backlink DoFollow
  • 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. 
    Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News
    Artikel Terkait: