MEMBUAT TOMBOL DONASI DENGAN JQUERY

Banyak blog yang menyediakan kata donasi sebagai sumber pemasukan dari blog, Sebenernya aku kurang begitu sreg dengan kata donasi di blog, tetapi apa salahnya jika donasi tersebut diperuntukkan bagi orang-orang yang membutuhkan.


Lalu bagaimana kita membuat donasi itu sendiri ?, banyak sekali caranya, bisa langsung ditampilkan no rekening bank, supaya orang bisa langsung transfer, atau bisa dengan paypal.

Untuk paypal sendiri sebenernya sudah menyediakan code yang menampilkan tombol donasi, linknya bisa dilihat di https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside.

Tetapi kali ini berdasarkan, sumber dari flowdrops, saya ingin menampilkan postingan yang membuat user bisa langsung memasukkan nilai donasi sebelum link ke paypal, Contoh DEMO-nya bisa dilihat disini lalu bagaimana caranya.

Cara termudahnya adalah klik tombol blogger dibawah ini, kemudian login dan pilih blog anda.

Atau anda bisa ikuti cara dibawah ini.
1. Anda harus mempunyai account paypal tentunya.
2. Login ke blogger, pilih Menu Design >> Page Elements
3. Klik Add Gadget dan pilih HTML/Script
4. Masukkan kode dibawah ini ke dalamnya.

<script type="text/javascript" src="http://daffa.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://daffa.googlecode.com/files/donate.js"></script>
<style type="text/css">
.red {color:#ff0000;}
.icon_warning {background:transparent url(http://i608.photobucket.com/albums/tt169/karsono29/exclamation.png) left no-repeat;padding:4px;padding-left:20px;}
form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;}
form#form_paypal input#input_amount {width:50px;}
form#form_paypal .submit {cursor:pointer;border-style:outset;}
</style>
<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="karsono.mail@gmail.com">
<input type="hidden" name="item_name" value="Jumlah Donasi Saya">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="bn" value="PP-DonationsBF">
<label for="">Jumlah (US$) : </label><input style="background:#FFFCEF; border:1px solid #FFE56F" type="text" name="amount" id="input_amount" width="10" class="text" />
<input style="background:url(http://i608.photobucket.com/albums/tt169/karsono29/btn_donate_LG.gif)no-repeat; width:95px; height:30px; border: 0pt none;" type="submit" name="submit" value="" class="submit" />
<div class="clearer">&nbsp;</div>
<p>
<span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal mengambil USD 0.35 dari setiap donasi, terima kasih!</span>
<span id="msg_noamount" class="icon_warning red" style="display:none;">Masukkan Jumlah donasi yang diinginkan dan coba lagi.</span>
<span id="msg_activity" style="display:none;"> <img src="http://i608.photobucket.com/albums/tt169/karsono29/loader.gif" align="absmiddle" />&nbsp;Sedang proses ke PayPal, tunggu sebentar...</span>
</form>

yang patut jadi perhatian adalah kode yang berwarna merah, ganti value tersebut menjadi alamat paypal anda.

Semoga postingan ini bermanfaat bagi semua...