 |
| Kotak Donasi Paypal Efek PopUp |
Untuk memasang widget ini kamu harus sudah punya akun Paypal ( Search aja gan untuk cara pendaftaranya), kalau belum punya bisa pakai akun Paypal saya dulu..hahahaha. Nah langsung saja yah berikut adalah cara memasangnya di Blog.
Cara Pasang Kotak Donasi Paypal Efek PopUp di Blog
Di Blog Blogger => Tata Letak => Tambahkan Gadget => Pilih gadget HTML/JavaScript => Masukan kode dibawah ini kedalam kotak.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/></script>
<script src='https://sites.google.com/site/seocips/seocips-script/cookie30.js' type='text/javascript'/></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#popupcc{ position:fixed;z-index: 9999990;width:100%;color:#fff; height:100%;top:0;font-family: 'Open Sans Condensed', sans-serif;display:none;}
#main-box { position:fixed;top:100px;left:50%;margin-left: -165px;padding:15px;background: #353535; box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:300px;height:auto;z-index:9999999; }
#main-box h2 { margin:5px;color:#fafafa; text-align:center;font-weight:normal;text-transform:uppercase; font-family: 'Open Sans Condensed', sans-serif; }
#popup-body h2{text-align:left; width:300px;}
#popup-body h2 img{width:25px; position:relative; right:5px; }
.body-inner{float:left;width:300px;} .popup-image{float:right} .popup-image img{position:relative;top:10px;}
#main-box h2 img { border:0; position:relative;top:3px; right:5px;}
#main-box-in { padding:10px; border-radius: 5px;-webkit-border-radius: 5px; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5); }
#main-box a { margin:5px;color:#fff;text-decoration:none;text-transform:uppercase; }
#main-box a img { position:relative; right:3px; top:2px;border:0; }
#creditcc { width:100%;padding:10px 0px;margin:auto;text-align:center; }
#cc-donate select{-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; width:80px; height:30px; background:#fafafa url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-130f-Q3ATv3B7Ta6ecSzUtsSYbSpirMhFxz9L7FQD-84ATD91FyKxQtdyY3s9zPQm8FBYi3cxJYOb2M1LVVjc9dBc5Hc47_42fnyonqpfJr2tX3_8eCOhbaAbqwhdtmb4O734vPX2vS/s1600/down.png') no-repeat right;background-size:20px 20px; border:1px solid #f2f2f2; border-radius:2px;-webkit-border-radius:2px; color:#333;font-family: 'Open Sans Condensed', sans-serif; font-size:16px;}
#cc-donate input[type=image] {position:relative; top:7px;}
</style>
<div id="popupcc">
<div id="main-box">
<div id="main-box-in">
<h2>Help us keep this site alive</h2>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5xcfn-J4tN9_Joor2dMT14SsFDdtoazAl3kOdTmaH1xZO4r7loKX8GPOlwohjNeXYaEv2wAnG1BuZfSH53WBSYUjq-57ZZ1bc7algUX9EfxGtEYN9xeV0X3nZFNOk5yIim5R2OSAzhbU/s1600/donate-14101537764n8gk.png" width="100px" /></center>
<center><form id="cc-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!--Change PayPal Email-->
<input type="hidden" name="business" value="paypal@email.com"/>
<input type="hidden" name="cmd" value="_donations"/>
<input type="hidden" name="item_name" value="Donation"/>
<input type="hidden" name="item_number" value="Donation"/>
<select name="amount">
<option value="5.00" />$5.00
<option value="10.00" />$10.00
<option value="15.00" />$15.00
<option value="20.00" />$20.00
<option value="25.00" />$25.00
</select>
<input type="hidden" name="currency_code" value="USD"/>
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="PayPal - The safer, easier way to pay online"/>
</form></center>
<div id="creditcc">
<a href="http://www.seocips.com/2015/09/kotak-donasi-paypal-efek-popup-di-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig-W_xeCmzWtwP7PxAvjLCi2p4dEfE-0-cfqryKW7NR8Ij2-piqycNfYljueindxi5KjNOBQrpga1AwJxgxd95z5DS0W18OFS42cB8xBlf4AEd537-DqqnKC-JJRaZOQFdta-5OwkmBVDY/s1600/Download_icon.png" width="12px" />Get It</a>~ <a href="JavaScript:void(0)" id="closecc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ADUgIOOb4nnupEfUmXzkdQjKRsjs2aG5_zAgw9LWhGGgrqkZsSxsDpshUbbbH8h5J12hg2PCEN-aWaLzVwrY52njrvT4KXPrXqMqN2WBhWiubaxs8KmYYH6pE-frCquq5LpGnETqZkOL/s1600/icon-close-red.png" width="15px"/>Don't show again</a>~ <a href="#" onclick="document.getElementById('popupcc').style.display='none'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5nfzMk4PKSs8nLz6qEDVR_p069WUWfeXQD4zD_1_AcaJWK_TmJduAwK_nWNLCnexZw0-LnMAmp1KtjLdrD6D2H-Q8sCl-_9AF5TQtOkO8vA0aiUylQXNlNPHf6lV9U3ZQQqjt3qcPYpsg/s1600/icon-close.png" width="15px"/>Close</a>
</div>
</div><!--Main in-->
</div><!--main-box-->
</div><!--Seocips popup-->
Untuk kode Jquery Plugin berwarnah merah diatas, jika sudah ada di template kode itu tidak perlu di pasang lagi. Sebelum Save cari kode seperti dibawah ini dan ganti paypal@email.com dengan dengan email paypal milik kamu.
<input type="hidden" name="business" value="paypal@email.com"/>
Jika sobat tertarik dengan efek-efek popup seperti ini lihat juga:
Nah sekian cara membuat kotak donasi Paypal efek pop up di Blogger. Untuk cara pasangnya pasi mudah bukan? ok sekian semoga bermanfaat.
Post Comment