Membuat Tombol Donasi Paypal Dengan Toggle Dan Fixed

Membuat Tombol Donasi Paypal Dengan Toggle Dan Fixed

Bola Hero Gawai

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>

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

15 Comments Add Comment

Wah amankan dulu mas .. :)

Balas

Selalu mantap tutorial kaangg adhy ini.. tp blum punya paypalnya kang :D

Balas

Silahkan mas Fani hehehe :)

Balas

Silahkan bikin dulu paypalnya kang hehhehe :)

Balas

keren :D gak makan tempat kang dan bisa dapet uang tambahan :D
Suka juga sama "Silahkan berkomentar sesuai topik!"

Balas

Iya mas heheehe :)
Yang itu ada di tutorial sebelumnya mas :)

Balas

Mantap Sekali, tapi saya nggak punya akun paypal =(
Kang Adhy mau nanya gimana cara buat Headernya Fixed ? (Buat template johny asal responsive)

Makasih

Balas

Saya ikutan nyimak saja ya mas soalx ga ngerti sy.

Balas

hanya bisa menyimak kang soalnya saya tidak punya paypal hehehehehe

Balas

Tinggal bikin aja Paypal nya gratis mas :)
Maksudnya gimana mas? :)

Balas

Saya malah ga ngerti cara nyuntik hehhhehe bu dr. Dheavy :)

Balas

Heheheh tinggal bikin aja gratis mas :)

Balas

mantep nih kang, boleh di terapkan di blog nih :)

Balas

ijin bookmark sapa tau nanti buth mas =D , soalnya belum punya kartu kredit hehe.. :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×