Membuat Tombol Bantuan Paypal Dengan Toggle Dan Fixed

Jika Anda telah menciptakan atau memiliki akun Paypal, selain sebagai alat membayar maupun dibayar secara online dengan gampang juga sanggup kita gunakan sebagai kotak bantuan blog. Sebenarnya tombol bantuan ini sudah disediakan oleh Paypal bagi Anda yang ingin menggunakannya dengan mengisi form bantuan maka instruksi tombol bantuan Paypal-nya sanggup kita dapatkan.

Namun kali ini saya akan share cara menciptakan tombol bantuan yang berbeda dengan memakai toggle jquery yang disimpan melayang di blog. Namun kita tetap harus menciptakan dan mengisi form bantuan di Paypal untuk menciptakan halaman bantuan Paypal blog kita dan untuk mendapat URL halaman donasinya.

Silahkan Anda masuk ke akun Paypal Anda, kemudian klik Merchant Service dan silahkan pilih Donations. Kemudian silahkan isi form-nya dan sehabis tamat klik tombol Create Button dan copy URL-nya dari instruksi yang diberikan. Kemudian silahkan copy kode-kode di bawah ini.

Kode CSS

 .paypalbox{
     position:relative;
     width:250px;
     height:auto;
     position:fixed;
     bottom:0;
     left:60px;
 }
 .tombolpaypal{
     text-align:center;
     text-decoration:none;
     width:240px;
     height:auto;
     background:#555;
     padding:5px 5px 15px;
     display:none;
 }
 .paypal{
     background:#efefef;
     border:0;
     margin:0 auto;
     padding:5px 18px;
     font-size:18px;
     font-weight:700;
     color:#333;
     text-align:center;
     display:inline-block;
     border-radius:3px;
 }
 .paypal:hover{
     background:#ddd;
 }
 .paypalheader{
     background:#222;
     border-radius:3px 3px 0 0;
     margin:0 auto;
     padding:8px 23px;
     font-size:18px;
     font-weight:700;
     color:#fff;
     text-align:center;
     display:block;
     cursor:pointer;
 }
 .tombolpaypal a{
     text-decoration:none;
 }
 .tombolpaypal p{
     color:#ddd;
     font-size:14px;
     margin:5px 0 10px;
 }

Untuk memilih posisi tombolnya, silahkan ganti left dengan right pada CSS .paypalbox kalau Anda ingin menyimpannya di sisi kanan blog.

Kode HTML

Silahkan simpan di atas instruksi </body>

 <div class="paypalbox">
 <span class="paypalheader">Donasi</span>
 <div class="tombolpaypal">
     <p>Secangkir kopi selalu menemani saya menciptakan tutorial. Donasi Anda sanggup membantu saya menyediakannya.<br/>
         Terima kasih.</p>
     <a href="URL HALAMAN DONASI PAYPAL" title="Membuat Tombol Donasi Paypal Dengan Toggle Dan Fixed" target="_blank">
     <span class="paypal">Donasi via Paypal</span></a>
 </div>
     </div>

Silahkan ganti URL HALAMAN DONASI PAYPAL dengan URL yang didapat dari instruksi tombol bantuan dari Paypal tadi. Dan untuk kalimat pesannya silahkan ganti dengan kalimat Anda sendiri.

Kode Javascript

Silahkan simpan di atas instruksi </body>

 <script type='text/javascript'>
 jQuery(document).ready(function($) {
     $('.paypalheader').click(function() {
         $('.tombolpaypal').slideToggle(500);
     });
 });
 </script>

DEMO

Sumber https://www.kompiajaib.com/

Share this post