Cara Membuat Kotak Donasi Blogger Seperti di Web Igniel

Cara Membuat Kotak Donasi Blogger Seperti di Web Igniel

Pagi Sobat Bloggers !!! semoga kalian semua senantiasa masih diberi kesehatan sama yang Maha Kuasa. Sering kali kita menjumpai website-website besar yang biasanya disana mereka memakai kota donasi yang fungsinya untuk memberikan sedikit shodaqoh buat kepentingan perkembangan websitenya baik itu via ovo, dana, paypal, maupun yang lain. Kalian bisa lihat tampilan gambar dibawah ini.

Maka dari itu disini saya akan sharing sekalian berbagi caranya membuat sebuah Css untuk kotak donasi tersebut yang mana kotak donasi ini telah dibuat oleh seorang developer yang mungkin tidak asing lagi bagi para bloggers yaitu igniel.com. Script disini asli langsung dari blog tersebut, hanya sedikit saya rubah seperti class ataupun id.nya menjadi .kingnizare dan warna css serta tulisannya. Bagi sobat yang ingin membuat dan memasangnya di template blog sobat kalian bisa ikut cara-cara dibawah ini.

CARA MEMBUAT KOTAK DONASI BLOGGER BY IGNIEL

Berikut adalah langkah-langkah Kotak Donasi serta Efek Bounce

#1 SIlahkan Login dan masuk dashboard akun Blogger.com

#2 Kemudian Klik Tema > Edit Html> Setelah itu copy kode CSS dibawah ini dan Pastekan Tepat DI ATASNYA Script (</style> Atau ]]></b:skin>) dengan Cara  Tekan (Ctrl + F) dan Ketikan di Form Search kode </style> dan Enter. Lalu paste Scriptnya.

Berikut Kodenya :

/* Paypal Donation Box Bounce by Igniel */
.kingnizare {background:#1a0de4; /* warna background */
  color:#fdfdfd;
  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;}
.kingnizare .ikon a {background-color:#fdfdfd; /* warna ikon */
  color:black;
  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:kingnizareBounce 1s linear 1s infinite normal; animation:kingnizareBounce 1s linear 1s infinite normal}
.kingnizare svg {width:50px; height:50px}
.kingnizare svg path {fill:#1bc700}
.kingnizare .ikon {margin-right:15px}
.kingnizare .deskripsi {line-height:1.5em;}
.kingnizare .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

@keyframes kingnizareBounce{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 kingnizareBounce{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)}
}

#3 Simpan Tema Sobat,

#4 Selesai, Ada lanjutan dibawah yaa sobat.

(Namun ada Lanjutan lagi sobat, itu hanya masang CSS.nya saja), Langkah selanjutnya yaitu pemasangan Script Html dan Java Scriptnya cukup mudah caranya yaitu Kembali ke Dashboard blog sobat setelah itu ikuti langkah dibawah ini ;

#1 Klik > Tata Letak/ layout 
#2 Pilih > Tambah Gadget 
#3 Pilih > Html/Javascript dan tempel kode dibawah ini.

Berikut Kodenya :

<!-- Paypal Donation Box Bounce by igniel -->
<div class='kingnizare'>
  <div class='ikon'>
    <a href='https://api.whatsapp.com/send?phone=6285606799528&amp;text=Silahkan%20Donasi%20Kirim%20Via%20OVO/DANA%20ke%20Nomor%20085606799528%20an.%20Nizar%20Subqi%20Hamza%20Terimakasih%20!!!' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Ovo/Dana'>
      <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 OVO</span>
    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk perkembangan website <b><i>Duniamu38</i></b>. Terima kasih.
  </div>
</div>

Catatan Penting !!!

Jangan lupa untuk mengganti Url Via Ovo/dana dibawah ini yang sudah saya kasih warna merah dan ubah urlnya sesuai via apa yang akan sobat buat menerima donasinya.

Kotak donasi termasuk kategori sangat ringan untuk dipasang diblog, tidak mempengaruhi kecepatan akses blog sobat sama sekali kalian bisa liat demonya disini DEMO, munkgin itu sedikit Cara Membuat Kotak Donasi Blogger Seperti di Igniel, Semoga bermanfaat tutorial ini. Terimakasih