Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara Membuat Tombol Donasi PayPal di Blog 100% Work

Ditulis oleh Kevin
Donasi via Paypal
Cara Membuat Tombol Donasi via Paypal - Dalam mengelola blog, tentu para blogger banyak menggunakan waktu, pikiran dan tenaga mereka. Namun, selain itu sebenarnya mereka juga rela berkorban sedikit finansial untuk mengelola blog mereka. Kita sendiri juga tau bahwa mengelola blog tentu membutuhkan koneksi internet, nah untuk mendapatkan koneksi internet tentu membutuhkan paket data atau jaringan wifi yang bisa kita dapatkan di WiFi corner.

Selain koneksi intertnet, seorang blogger juga membutuhkan biaya tambahan untuk menyewa hosting dan domain untuk blog yang dikelola. Hal ini memang tidak wajib, namun blog dengan domain sendiri tentu akan terlihat profesional dan menarik kepercayaan pembaca untuk mengunjungi blog tersebut di lain waktu.

Biasanya para blogger mengeluarkan modal di awal, lalu setelah blog berhasil di monitize (menghasilkan uang dari blog), maka mereka akan menggunakan penghasilan tersebut untuk membiayai pengelolaan blog mereka.

Akan tetapi tentu tidak semua blogger mempunyai uang untuk pertama kali merawat blog apalagi blog dalam kondisi belum bisa di monitize. Oleh karena itu, tidak jarang blogger-blogger di luar sana yang menggunakan pemasang iklan, jasa menulis artikel, ataupun yang sangat mudah adalah program donasi. Pada program donasi ini, blogger hanya memberikan notifikasi pada user interface agar pengunjung tahu bahwa pemilik blog sedang membutuhkan donasi dalam rangka pengelolaan blog. Jika pengunjung sedang berbaik hati, maka tidak menutup kemungkinan blogger akan mendapatkan donasi dari pengunjungnya.

Tentu hal ini sangat mudah dilakukan, apalagi jika blog yang kita kelola sudah dikenal oleh banyak orang serta dipercaya oleh para pengunjung. Alhasil pundi-pundi rupiah bisa kita peroleh dari hasil donasi pengunjung untuk mengelola blog kesayangan kita.

Bagaimana Pengunjung Blog Menyalurkan Donasi Mereka?

Dalam pembahasan kali ini cukup sederhana, untuk mengumpulkan donasi dari pengunjung kita bisa menggunakan akun PayPal. Dengan menggunakan akun PayPal, kita bisa menampung donasi pengunjung ke dalam akun, dan suatu saat jika sudah terkumpul kita bisa mengambilnya untuk keperluan pengelolaan blog kesayangan kita.

Apa itu PayPal?

Sedikit penjelasan mengenai PayPal, PayPal adalah sistem pembayaran dalam bentuk elektronik yang menggantikan transaksi konvensional berupa cek dan transfer uang. Dengan memiliki akun PayPal, bisa diibaratkan bahwa kita mempunyai rekening secara online yang dapat digunakan untuk membeli produk dan menerima dana dari orang yang mempunyai akun PayPal ataupun kartu kredit. Keren bukan?

Jadi, karena dalam artikel ini kita akan membahas tentang donasi melalui PayPal, silahkan membuat akun PayPal terlebih dahulu sebelum kita menuju ke langkah-langkah pemasangan tombol donasi PayPal. Karena bakalan sia-sia jika kita memasang tombol donasi PayPal namun tidak memiliki akun PayPal, mau di bawa kemana uang pendonasi nanti?

Bedakan PayPal.com dengan PayPal.Me

Jadi, intinya adalah kalian membuat akun terlebih dahulu di PayPal.com, setelah itu baru kalian membuat username profil akun melalui PayPal.Me.

Nah.. username dari PayPal.me inilah yang akan kamu jadikan bahan untuk memasang tombol donasi paypal di blog, sehingga saat pengunjung mengklik dan hendak melakukan donasi, maka akan diarahkan ke url username yang telah kamu buat di PayPal.Me tadi, begitu..

Sudah siap? Begini Cara Membuat Tombol Donasinya

#Cara 1 - Membuat Tombol Donasi Paypal Tepat di Bawah Artikel

1. Login ke akun Blog lalu pergi ke pengaturan Template / Tema -> Pilih Edit HTML
2. Lalu, pasang kode CSS berikut tepat di atas kode </style> atau ]]></b:skin>
<style>
.pscom{ /* Warna Background Gradient*/
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: pscom 12s ease infinite;
    -moz-animation: pscom 12s ease infinite;
    animation: pscom 12s ease infinite;
}
@-webkit-keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
</style>
<style>
.penasharingDonasi { /* Desain Tombol dan Tampilan */
  color:#ffffff;
  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;}
.penasharingDonasi .ikon a {background-color:#ffffff; /* Warna Ikon */
  color:#c10e0e;
  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:penasharingBounce 1s linear 1s infinite normal; animation:penasharingBounce 1s linear 1s infinite normal}
.penasharingDonasi svg {width:50px; height:50px}
.penasharingDonasi svg path {fill:#c10e0e}
.penasharingDonasi .ikon {margin-right:15px}
.penasharingDonasi .deskripsi {line-height:1.5em;}
.penasharingDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

@keyframes penasharingBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes penasharingBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
</style>
3. Setelah memasang kode CSS, silahkan pasang kode HTML berikut di bawah kode <data:post.body/>
<!-- Source code by penasharing.blogspot.com-->
<div class='penasharingDonasi pscom'>
  <div class='ikon'>
    <a href='https://paypal.me/#' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
      <svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></path></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    Bantu berikan donasi jika dirasa blog ini bermanfaat. Donasi akan digunakan untuk membeli domain <b><i>www.penasharing.com</i></b>. Terima kasih :)
  </div>
</div>
Berikut contoh tombol donasi yang saya taruh di Pena Sharing :
Contoh Tombol Donasi via Paypal ala Pena Sharing
Peringatan!
Jangan lupa ganti url https://paypal.me/# dengan url profil paypalmu.

#Cara 2 - Menaruh Tombol Donasi Paypal di bagian Widget Blog

Cara yang kedua ini tentu cara yang sangat mudah. Kita tinggal mengcopy kedua kode di Cara 1 (CSS + HTML) dan memasangnya di Widget blog melalui menu Tata Letak. Biar lebih jelas, yuk ikuti langkah-langkahnya :
1. Masuk ke Tata Letak dan pilih Tambah Widget -> pilih HTML/Java Script
2. Tempel kode berikut ke dalam HTML/Java Script yang telah kamu dibuka (melalui langkah ke 1)
<style>
.pscom{
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: pscom 12s ease infinite;
    -moz-animation: pscom 12s ease infinite;
    animation: pscom 12s ease infinite;
}
@-webkit-keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes pscom {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
</style>
<style>
.penasharingDonasi { /* Warna Background */
  color:#ffffff;
  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;}
.penasharingDonasi .ikon a {background-color:#ffffff; /* Warna Ikon */
  color:#c10e0e;
  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:penasharingBounce 1s linear 1s infinite normal; animation:penasharingBounce 1s linear 1s infinite normal}
.penasharingDonasi svg {width:50px; height:50px}
.penasharingDonasi svg path {fill:#c10e0e}
.penasharingDonasi .ikon {margin-right:15px}
.penasharingDonasi .deskripsi {line-height:1.5em;}
.penasharingDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

@keyframes penasharingBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes penasharingBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
</style>
<!-- Paypal Donation Box Bounce-->
<div class='penasharingDonasi pscom'>
  <div class='ikon'>
    <a href='https://paypal.me/penasharing?locale.x=id_ID' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
      <svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></path></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    Bantu berikan donasi jika dirasa blog ini bermanfaat. Donasi akan digunakan untuk membeli domain <b><i>www.penasharing.com</i></b>. Terima kasih :)
  </div>
</div>
3. Klik simpan dan lihat hasilnya
Peringatan!
Jangan lupa ganti url https://paypal.me/# dengan url profil paypalmu.

Jika kamu ga pengen ribet-ribet dalam proses pemasangannya, silahkan kamu menggunakan cara 2 yang lebih praktis. Jangan lupa berkomentar dan bagikan artikel ini.. semoga artikel ini bermanfaat..