Ingin mencari cuan dari blog dengan menambahkan fitur donasi di blogger? atau ingin mempercantik tampilan blog? Disini saya akan memberikan Tutorial Blogger Membuat Kotak donasi paypal dibawah postingan artikel blog.
Umumnya kotak donasi paypal di blog sering diletakkan pada bagian Widget blog yang berada di sidebar ataupun footer. Artikel ini akan sedikit berbeda karena kita akan membuat kotak donasi paypal berada dibawah postingan blog.
Table of Contents
Ini sedikit modifikasi dari kotak donasi paypal milik Igniel.
Kamu harus punya paypal.me dulu
setelah memiliki profile paypal.me, barulah kita akan membuat kotak donasi paypal di blogger.
Kotak Donasi Paypal di Blogger
Setelah membuat profile paypal.me, silahkan buka blogger pergi ke tema > EDIT HTML, dan masukkan kode css kotak donasi paypal dibawah ini tepat di atas kode </style> atau ]]><</b:skin>
/* Paypal Donation Box Bounce by deuxly.com */
.deuxlyDonasi {
background-color:#bde0b9; /* warna background */
color:#000;
display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:center; margin:20px 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;
}
.deuxlyDonasi .ikon a {
background-color:#38B6FF ; /* warna ikon */
color:#fff;
text-decoration:none; display:inline-block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:deuxlyBounce 1s linear 1s infinite normal; animation:deuxlyBounce 1s linear 1s infinite normal
}
.deuxlyDonasi svg {width:50px; height:50px}
.deuxlyDonasi svg path {fill:#00E0FF }
.deuxlyDonasi .ikon {margin-right:15px}
.deuxlyDonasi .deskripsi {line-height:1.5em;}
.deuxlyDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
Kemudian simpan kode HTML ini tepat berada dibawah kode <data:post.body/>
Related Posts
<!-- Paypal Donation Box Bounce by deuxly.com -->
<div class='deuxlyDonasi'>
<div class='ikon'>
<a href='https://www.paypal.me/xxxx' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
<svg class='line' viewBox='0 0 24 24'><path d='M19.86 8.08997C19.86 8.50997 19.83 8.91997 19.78 9.30997C19.32 9.10997 18.82 8.99997 18.29 8.99997C17.07 8.99997 15.99 9.58996 15.32 10.49C14.64 9.58996 13.56 8.99997 12.34 8.99997C10.29 8.99997 8.63 10.67 8.63 12.74C8.63 15.42 10.05 17.47 11.63 18.86C11.58 18.89 11.53 18.9 11.48 18.92C11.18 19.03 10.68 19.03 10.38 18.92C7.79 18.03 2 14.35 2 8.08997C2 5.32997 4.21999 3.09998 6.95999 3.09998C8.58999 3.09998 10.03 3.87997 10.93 5.08997C11.84 3.87997 13.28 3.09998 14.9 3.09998C17.64 3.09998 19.86 5.32997 19.86 8.08997Z'></path><path d='M22 12.74C22 17.42 17.67 20.18 15.73 20.84C15.5 20.92 15.13 20.92 14.9 20.84C14.07 20.56 12.8 19.89 11.63 18.86C10.05 17.47 8.63 15.42 8.63 12.74C8.63 10.67 10.29 9 12.34 9C13.56 9 14.64 9.58999 15.32 10.49C15.99 9.58999 17.07 9 18.29 9C18.82 9 19.32 9.11 19.78 9.31C21.09 9.89 22 11.2 22 12.74Z'></path></svg>
<span>KLIK</span>
</a>
</div>
<div class='deskripsi'>
<span class='judul'>DONASI VIA PAYPAL</span>
Jangan lupa ganti url paypal.me dengan url paypal milik kalian
Kesimpulan
Jika ada pertanyaan, boleh tinggalkan komentar. Next bikin Tutorial Blogger apalagi yah?
