Cara Membuat Tombol Donasi PayPal Dengan Bouncing Effect

Bouncing effect atau effect memantul untuk tombol donasi PayPal di blog.
Sebuah blog tidak ada salahnya jika ingin membuat donasi PayPal di blog meraka, ini bertujuan untuk ajakan kepada pengunjung supaya memberikan donasi kepada pemilik blog agar pemilik blog tersebut bisa memberikan konten atau artikles yang terbaik lagi.
Bahkan di beberapa situs besar tombol donasi ini secara jelas agar pengunjung bisa melakukan donasi kepada situs itu.
Padahal itu sih tergantung pengunjung juga mau atau tidak memberikan donasinya hehe.

Sebenarnya kalo buat saya sih sudah banyak yang berkunjung di blog saya juga sudah bersyukur banget.tapi biar sedikit lebih Keren dan siapa tau ada orang yang rela memberikan donasinya ke blog saya hehe.

Dengan effect bouncing ini juga tombol donasi bisa terlihat mencolok dan kesempatan di klik juga bisa lebih besar oleh para pengunjung.

Langsung saja jika ingin membuatnya.
Oh iya tombol donasi ini juga valid amp.

1.

Pertama silahkan simpan kode CSS ini di bawah amp costum jika blog anda AMP HTML dan jika blog anda HTML 5 simpan kode CSS nya Setelah kode <style>

.blogmobileBounce svg{width:10px;padding:2;height:10px}  .blogmobileBounce svg path{fill:#fff;} .blogmobileBounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff;font-weight:900;font-size:16px;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .blogmobileBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
.ignielBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@media screen and (max-width:320px)
@keyframes rubberBand{,10%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}



2.

Langkah kedua simpan kode HTML ini.

 <a class="blogmobileBounce" href="https://www.paypal.me/EncepNurdin" title="Found an article helpful? Donate via PayPal"> Donate via PayPal <svg viewBox="0 0 16 16">
    <g>
        <path d="M4.5 1a.623.623 0 0 0-.615.525L2.15 12.528S2 13 2.43 13h2.767l.584-3.48v-.003a.62.62 0 0 1 .615-.524H7.67c2.507 0 4.47-1.234 5.045-4.18.017-.088.032-.173.045-.256.17-1.09-.002-1.83-.59-2.5C11.522 1.317 10.35 1 8.85 1z" />
        <path d="M13.596 5.373c-.36 1.475-1.067 2.653-2.067 3.426-1.086.837-2.442 1.194-3.86 1.194h-.955L6.043 14H5.04l-.1.62a.33.33 0 0 0 .326.38H7.53a.543.543 0 0 0 .536-.46l.024-.114.426-2.705.027-.15a.545.545 0 0 1 .54-.46h.337c2.193 0 3.91-.89 4.412-3.467.176-.903.11-1.67-.236-2.27z" opacity=".5" />
    </g>
</svg> </a>



KETERANGAN

ganti username paypal dengan username paypal anda Untuk penerapan di blog juga sama saja.


  • Layout
  • Add a gadget
  • Pliih HTML/JavaScript


Selamat mencoba...

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×