Cara Membuat Kotak Donasi Di Blog

Membuat kotak Donasi di suatu blog atau website itu juga sangat penting, kenapa saya katakan penting? Karena jika ada seseorang yang ingin memberikan donasi, mereka tidak perlu susah-susah untuk menghubungi kalian melalui email yang ada pada blog atau website kalian dan saya rasa itu membutuhkan waktu yang lama karena tidak setiap menit kita mengecek email yang masuk.
Shandy irianto
TechPapuaID
TechPapuaID - Mendapatkan Rezeki yang tidak disangka kadang membuat seseorang itu bahagia, apalagi ketika apa yang kita lakukan itu bermanfaat bagi sebagian orang dan orang itu memberikan sebuah hadiah berupa uang, barang atau sebaginya.

Kita sebagai content creator, blogger dll pasti lebih semangat untuk membuat content dan artikel-artikel yang bermanfaat karena diberikan hadiah atau donasi. Walaupun tidak seberapa hal itu menjadi motifasi bagi kita karena apa yang kita lakukan itu sangat bermanfaat untuk sebagian orang, khususnya mereka yang sedang belajar untuk memulai suatu hobby atau pekerjaan yang menyangkut tentang dunia sosial media.

Diluar sana masih banyak orang baik yang mau memberikan sedikit rezeki mereka untuk kita dengan catatan apa yang kita berikan itu bermanfaat bagi mereka

Membuat kotak Donasi di suatu blog atau website itu juga sangat penting, kenapa saya katakan penting?
Karena jika ada seseorang yang ingin memberikan donasi, mereka tidak perlu susah-susah untuk menghubungi kalian melalui email yang ada pada blog atau website kalian dan saya rasa itu membutuhkan waktu yang lama karena tidak setiap menit kita mengecek email yang masuk.

Nah, pada kesempatan kali ini. Saya akan membuat tutorial Cara Membuat Kotak Donasi Di Blog yang tentunya kotak Donasi ini sangat responsive yang di buat oleh igniel.com.
Kalian harus mempunyai Paypal, karena kotak donasi ini khusus untuk Paypal
Langkah awal yang harus kalian lakukan adalah login ke blog atau website kalian masing-masing, lalu menuju ke theme dan edit HTML, lalu cari code ]]></b:skin> atau </style>
Lalu kalian Copy CSS di Bawah ini dan Paste kan tepat di atas Code Tersebut
/* Paypal Donation Box */
.ignielDonasi {
  background:#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;
}
.ignielDonasi .ikon a {
  background-color:#008c5f; /* warna ikon */
  color:#fff;
  text-decoration:none;
  display:block;
  padding:5px;
  border-radius:7px;
  text-align:center;
  -webkit-animation:ignielBounce 1s linear 1s infinite normal;
  animation:ignielBounce 1s linear 1s infinite normal
}
.ignielDonasi svg {
  width:50px;
  height:50px
}
.ignielDonasi svg path {
  fill:#bde0b9
}
.ignielDonasi .ikon {
  margin-right:15px
}
.ignielDonasi .deskripsi {
  line-height:1.5em;
} 
.ignielDonasi .deskripsi .judul {
  font-size:18px;
  font-weight:bold;
  display:block;
  margin-bottom:10px;
}
@keyframes ignielBounce{
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 ignielBounce{
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)
 }
}
Langkah selanjutnya silahkan kalian cari Code <data:post.body/>
Lalu copy code di bawah ini dan pastekan tepat di bawah code tersebut.
<!-- Paypal Donation Box -->
<div class='ignielDonasi'>
  <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 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'/></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    ISI KATA-KATA ANDA DI SINI
  </div>
</div>
Perhatikan, yang saya tandai warna merah silahkan kalian ganti dengan username Paypal kalian dan kata-kata apa yang kalian mau.
Silahkan kalian save template kalian dan lihat hasilnya, kotak donasi Paypal ini sangat ringan dan tidak mengganggu loading blog karena efeknya dibuat oleh CSS saja.

Khusus kalian pengguna template Viomagz, untuk bagian <data:post.body/> terdapat 3 bagian, silahkan kalian coba satu per satu, biasanya code tersebut di bagian terakhir atau bagian ke 3 karena saya sendiri menggunakan template Viomagz.

Mungkin sekian dulu pembahasan tentang Cara Membuat Kotak Donasi Di Blog jika ada pertanyaan jangan sungkan untuk komen di bawah.
Shandy irianto