Membuat Tombol Donasi Paypal Dengan Toggle Dan Fixed

Membuat Tombol Donasi Paypal
Jika Anda telah membuat atau mempunyai akun Paypal, selain sebagai alat membayar maupun dibayar secara online dengan mudah juga bisa kita gunakan sebagai kotak donasi blog. Sebenarnya tombol donasi ini sudah disediakan oleh Paypal bagi Anda yang ingin menggunakannya dengan mengisi form donasi maka kode tombol donasi Paypal-nya bisa kita dapatkan.

Namun kali ini saya akan share cara membuat tombol donasi yang berbeda dengan menggunakan toggle jquery yang disimpan melayang di blog. Namun kita tetap harus membuat dan mengisi form donasi di Paypal untuk membuat halaman donasi Paypal blog kita dan untuk mendapatkan URL halaman donasinya.

Silahkan Anda masuk ke akun Paypal Anda, lalu klik Merchant Service dan silahkan pilih Donations. Kemudian silahkan isi form-nya dan setelah selesai klik tombol Create Button dan copy URL-nya dari kode 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 menentukan posisi tombolnya, silahkan ganti left dengan right pada CSS .paypalbox jika Anda ingin menyimpannya di sisi kanan blog.

Kode HTML
Silahkan simpan di atas kode </body>


<div class="paypalbox">
<span class="paypalheader">Donasi</span>
<div class="tombolpaypal">
    <p>Secangkir kopi selalu menemani saya membuat tutorial. Donasi Anda bisa membantu saya menyediakannya.<br/>
        Terima kasih.</p>
    <a href="URL HALAMAN DONASI PAYPAL" title="Donasi via Paypal" target="_blank">
    <span class="paypal">Donasi via Paypal</span></a>
</div>
    </div>

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

Kode Javascript
Silahkan simpan di atas kode </body>


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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments