Salah satu fitur yang selama ini ingin saya pasang di template viomagz adalah kotak donasi buatan mbak ignil. Beruntungnya saat saya main ke blog mbak ignil yaitu ignil.com, saya menemukan tutorial cara memasang kotak donasi via paypal secara lengkap.

Saya mencoba mengaplikasikan kotak donasi tersebut di template viomagz yang saya gunakan. Saya coba mencari beberapa layout yang tepat, dan akhirnya menemukan layout yang sangat pas untuk kotak donasi ini.

Cara Memasang Kotak Donasi Paypal di Viomagz

Berikut ini adalah beberapa langkah yang harus dilakukan dalam pemasangan kode kotak donasi by ignil.

Buka Dashboard Blogger
Pilih Menu Tema
Pilih Edit HTML

Letakan kode CSS di bawah ini sebelum kode ]]></b:skin>

/* Paypal Donation Box Bounce by igniel.com */
.ignielDonasi {
	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;
}
.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)}
}

Di template Viomagz, untuk membuat kotak donasi ala mbak ignil ini bisa tepat berada bawah artikel, maka anda harus menempatkan kode HTML di bawah ini di dekat author profile atau widget share button.

<!-- Paypal Donation Box Bounce by igniel.com -->
<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='M5.757 20h-2.587c-0.553 0-0.905-0.441-0.78-0.983l0.124-0.562h1.726c0.555 0 1.113-0.444 1.235-0.985l0.887-3.827c0.125-0.54 0.68-0.983 1.233-0.983h0.736c3.158 0 5.612-0.649 7.367-1.95s2.633-3 2.633-5.112c0-0.938-0.163-1.713-0.49-2.324 0-0.013-0.013-0.026-0.013-0.038l0.113 0.063c0.625 0.388 1.1 0.887 1.426 1.512 0.337 0.625 0.498 1.4 0.498 2.326 0 2.112-0.874 3.812-2.637 5.113-1.75 1.287-4.213 1.937-7.362 1.937h-0.75c-0.55 0-1.112 0.437-1.237 0.988l-0.888 3.838c-0.124 0.537-0.675 0.975-1.225 0.975zM3.526 17.754h-2.587c-0.552 0-0.903-0.441-0.78-0.983l3.644-15.786c0.126-0.544 0.679-0.985 1.234-0.985h5.388c1.162 0 2.174 0.082 3.040 0.241 0.863 0.157 1.6 0.432 2.237 0.825 0.613 0.387 1.102 0.893 1.414 1.515 0.324 0.623 0.487 1.4 0.487 2.331 0 2.113-0.876 3.812-2.637 5.099-1.75 1.301-4.213 1.938-7.363 1.938h-0.736c-0.55 0-1.107 0.437-1.232 0.974l-0.884 3.824c-0.124 0.538-0.681 0.977-1.237 0.977zM9.731 3.28h-0.845c-0.555 0-1.11 0.441-1.233 0.982l-0.775 3.35c-0.125 0.54 0.225 0.982 0.775 0.982h0.638c1.387 0 2.475-0.286 3.25-0.851 0.774-0.572 1.162-1.378 1.162-2.427 0-0.692-0.251-1.204-0.75-1.533-0.5-0.337-1.25-0.504-2.238-0.504z'/></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain <b><i>www.igniel.com</i></b>. Terima kasih.
  </div>
</div>

Silahkan ganti judul dan kata-kata yang saya tandai dengan warna biru dan soft orange.

Apabila anda ingin menyimpan kotak donasi paypal di atas tombol share button, maka anda letakan kode di atas setelah kode ini.

<b:includable id='postsharebutton' var='post'>

Namun apabila anda memasang profil penulis, maka sebaiknya simpan kotak donasi ini di bagian bawah share button dengan cara simpan kode HTML di atas sesudah kode di bawah ini.

<b:include data='post' name='postsharebutton'/>

Klik simpan.

Untuk demonya silahkan anda lihat pada bagian bawah artikel ini. Karena saya sudah memasang kotak donasi paypal di blog ini.

Untuk menghapus animasi gerak (bounce) di kotak donasi ala mbak ignil, anda cukup menghapus bagian ini di kode CSS.

-webkit-animation:ignielBounce 1s linear 1s 
infinite normal; animation:ignielBounce 1s linear 
1s infinite normal

Untuk mengubah icon SVG pada kotak donasi paypal ini juga cukup mudah. Kode yang saya bagikan ini sudah saya ganti icon SVG nya dengan logo Paypal. Apabila anda ingin menggantinya lagi, silahkan baca artikel berikut:

Cara Memasang Icon SVG di Blog

Untuk mengganti donasi dari Paypal ke OVO, Dana, atau Gopay, anda cukup mengganti judul, logo, dan link tujuan.

Nah itulah tutorial blogger cara membuat kotak donasi ala mbak ignil di template Viomagz.

Semoga bermanfaat.

Referensi: ignil.com

Max Ikhsan

Hai, Saya adalah pemilik blog ini. Mau Kerja Sama? Hubungi maxikhsan.cs@gmail.com

Cara Membuat Kotak Donasi di Template Viomagz

Cara Memasang Kotak Donasi Paypal di Viomagz

Posting Komentar