Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai widget blogger untuk membuat sebuah kotak donasi atau donasi box keren dan responsif tentunya
Fungsi
Seperti yang kita ketahui kotak donasi diblog digunakan untuk menampilkan suatu informasi bagi para pengunjung untuk melakukan sebuah donasi, semisal no rekening dan lainnya
Biasanya kotak donasi disertakan sebuah link yang membawa pengunjung untuk melakukan transaksi pengiriman dana, atau juga kotak donasi biasa digunakan hanya sekedar untuk membuat tampilan baru didalam blog sehingga pengunjung tidak akan merasa bosan
Dibuat menggunakan CSS
Sebagai informasi untuk anda bahwa kotak donasi ini dibuat menggunakan kode CSS untuk membuat tampilan donasi box nya, sehingga blog anda tidak akan mengalami kehambatan saat blog dimuat ulang
Info: Dengan unsur CSS yang dipakai maka bisa dibilang bahwa kode untuk membuat kotak donasi ini sangatlah responsif dan baik untuk digunakan
Penggunaan Animasi CSS
Oh iya kotak donasi ini juga disertai atau menggunakan kode dari animasi CSS untuk membuat tampilan kotak donasi anda semakin menarik tentunya
Info: Jika sudah penasaran yuk langsung aja kita bahas bagaimana caranya membuat kotak donasi blog
Cara pembuatan
Baiklah sekarang kita akan mulai memasuki dan membahas mengenai cara pembuatan kotak donasi keren diblogger, disimak baik baik oke
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkan diatas atau sebelum kode ]]<>/b:skin<
.icloudice-donasi {background:#f80000; /* warna background */ color:#fff;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;}
.icloudice-donasi .ikon a {background-color:#fff; /* warna ikon */color:#f80000;text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:icloudiceBounce 1s linear 1s infinite normal; animation:icloudiceBounce 1s linear 1s infinite normal}
.icloudice-donasi svg {width:50px; height:50px}
.icloudice-donasi svg path {fill:#f80000}
.icloudice-donasi .ikon {margin-right:15px}
.icloudice-donasi .deskripsi {line-height:1.5em;}
.icloudice-donasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
@keyframes icloudiceBounce{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 icloudiceBounce{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)}
}Info: Kamu bisa menyesuaikan tampilan warna background dan juga textnya
Kode HTML
Setelah kamu menyimpan kode CSS yang telah saya jabarkan diatas, selanjutnya anda bisa menyalin kode dibawah ini, kemudian letakkin sesuai keinginan kamu
<div class='icloudice-donasi'>
<div class='ikon'>
<a href='https://www.paypal.me/icloudice' 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'>Support Me</span>
Bantu berikan donasi jika artikel icloudice dirasa bermanfaat <b> Terima kasih.</b>
</div>
</div>Info: Disini kamu bisa mengubah informasi text, link sosmed, dan Lainnya, sesuaikan menurut keinginan bkamu aja
Peletakkan kode HTML
Jika kamunya masih bingun pengen letakkin kode HTML nya dimana, kamu bisa mencari kode <data:post.body/> dan letakkan tepat dibawah kode tersebut
Info: Ingat ya setiap template blog itu berbeda beda, jadi cari kode tersebut secara perlahan-lahan oke
Contoh demo
Jika masih belum yakin dengan kode yang saya jabarkan diatas, kamu bisa melihat contoh demo dari tampilan kotak donasinya seperti dibawah ini
Terima kasih.
Info: Bagaimana sobat dengan tampilan donasi boxnya, keren bukan, oke jumpa lagi pada artike saya yang lainnya