Cara Modifikasi Paypal Button Valid AMP
Ketika ada berkunjung kesalah satu situs atau blog yang menyediakan dan menjual template pasti ketika anda melihat salat template yang premium pasti ada button atau tombol paypal dan transfer bank, dan itu sangat memudahkan pembeli template, sebenarnya sudah banyak yang membahas tutorial ini, namun tidak ada salahnya saya membahas lagi hehe, untuk itu saya akan membahas cara membuat dan modifikasi button paypal blog valid AMP
karena AMP sangat sensitif dengan script hehe, tentunya harus betul-betul valid AMP hehe..
Langkah Pertama
Pastikan template anda adalah template AMP hehe, banyak sekarang template AMP yang free dan ada juga yang premium dan harganya menurut saya murah karena membuat template itu susah loh hehe, apalagi template AMP, selanjutnya pastikan anda memilki akun paypal, karena kita akan memodifikasi button paypal hehe.. nanti saya akan bahas bagaimana cara membuat button id paypal
Silahkan coba demonya, saya menggunakan JSS fiddle
Langkah Kedua
Tambahkan kode CSS dibawah ini pada style amp-costum anda, baik itu css tampilan mobile maupun css dekstop
.btn-primary {
background: #ef991a;
}.btn-primary:hover{color:#fff;background:#d28514;border:#d28514}
#wrap{margin:10px auto;text-align:center}#wrap br{display:none}.btn-slide,.btn-slide2{position:relative;display:inline-block;height:60px;line-height:60px;padding:0;margin:10px;transition:.5s;border-radius: 3px;}.btn-slide{width:301.9px;background:#15a144;border:2px solid #15a144}.btn-slide2{width:301.9px;background:#FF552A;border:2px solid #ff552a}.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#1e823f;color:#fff;position:absolute;float:left;margin:5px;line-height:48px;height:50px;width:50px;top:0;left:0;transition:.5s;border-radius:50%}.btn-slide2 span.circle2{background-color:#e6380c}.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title-hover2,.btn-slide2 span.title2{position:absolute;left:60px;text-align:center;margin:0 auto;font-size:14px;text-transform:uppercase;font-weight:700;color:#fff;transition:.5s}.btn-slide2 span.title-hover2,.btn-slide2 span.title2{color:#fff;left:60px}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:60px;opacity:0;color:#fff}.et{float:right;background:#fff;padding:0 20px;color:#000;font-weight:700}
.btn-slide2 span.circle2:before {content:"\f218";font-family:FontAwesome;margin:0 auto;}.btn-slide span.circle:before{content:"\f019";font-family:FontAwesome;margin:0 auto;}
#title-btn {
text-align: center;
padding: 0 40px 0;
}
Langkah Ketiga
Buat postingan di pada blog anda, dan tambah kode dibawah ini pada mode html
<div id="wrap">
<a class="btn-slide" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ID BUTTON PAYPAL" target="_blank"><span class="circle"></span>
<span class="title">Pay Using Paypal</span>
<span class="et">$10</span></a>
<a class="btn-slide2" href="http://www.demangtheme.site/p/order-template.html" target="_blank">
<span class="circle2"></span>
<span class="title2">Transfer Bank</span>
<span class="et">130K</span></a>
</div>