Widget Donasi Ala Igniel

Widget Donasi Ala Igniel

Widget Donasi Ala Igniel? Siapa yang tak mengenal igniel, blogger terkenal di Indonesia, di dalam nya terdapat widget donasi untuk blog, nah kali ini adalah tutorial cara membuat widget donasi ala igniel. Sebagaimana kita tahu, donasi sumbangan tetap (berupa uang) dari penderma kepada perkumpulan; derma; 2 pemberian; hadiah. Nah sebelum eksekusi tutorialnya, admin sarankan untuk membackup terlebih dahulu baik kamu pengguna blogger atau WordPress, hal ini opsional selagi kamu ingat letak nya, namun bagi pemula ini sangat di anjurkan.

Dan berikut tahapan nya :

• Login terlebih dahulu ke blog kamu blogger.com atau wp admin kamu
• Kemudian copy dan paste code CSS berikut :

.ignielDonasi {
--background: #f9f9f9;
--backgroundHover: #f0f0f0;
--color: #2f2f2f;
--colorHover: #2f2f2f;
--icon: #5c5c5c;
--col: 2;
margin-top: 2rem;
}
.ignielDonasi path {
fill: none;
stroke: var(--icon);
stroke-width: 1.5px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.ignielDonasi svg:first-child {
height: 2rem;
width: 35px;
}
.ignielDonasi svg:last-child {
height: 1rem;
width: 1rem;
}
.ignielDonasi-judul {
font-weight: 700;
margin-bottom: 1rem;
}
.ignielDonasi img {
width: 35px;
}
.ignielDonasi-ikon {
margin-$endSide: 1rem;
}
.ignielDonasi-isi {
display: grid;
gap: 1rem;
grid-template-columns: repeat(var(--col), 1fr);
}
.ignielDonasi-isi a {
align-items: center;
background-color: var(--background);
border-radius: 7px;
color: var(--color);
display: flex;
gap: 1rem;
padding: .75rem 1.25rem;
text-decoration: none;
}
.ignielDonasi-isi a:hover {
background-color: var(--backgroundHover);
color: var(--colorHover);
text-decoration: none;
}
.ignielDonasi-isi .wallet {
flex-direction: column;
}
.ignielDonasi-isi .wallet i {
display: block;
font-size: 11px;
font-style: normal;
line-height: 13px;
}
.ignielDonasi-isi a, .ignielDonasi-isi a span {
flex-grow: 1;
}
@media screen and (max-width: 768px) {
.ignielDonasi-isi {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 568px) {
.ignielDonasi-isi {
grid-template-columns: repeat(1, 1fr);
}
}  

• Letakkan code CSS pada tempat nya, untuk Blogger letekan sebelum ]]></b:skin> dan untuk WordPress tempatkan pada Additional CSS di menu customize
• Kemudian copas HTML di bawah

<div class='ignielDonasi'>
<div class='ignielDonasi-judul'>Support Igniel</div>
<div class='ignielDonasi-isi'>
<a href='https://saweria.co/ID' rel='nofollow noopener' target='_blank' title='Donasi via Saweria'>
<img alt='Saweria' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmwjOYbtIh-peG5_26BFtFgRCBDPsoahSni6qPXWG43SRR04BBCMerSyUX8FCQp1upj4RuziDAwy19L_toRpnQaI61tzPKokNB8ixuyb06Ron2eK6qUXzwbmYQs4UcmYNp311k2-hkxO4lBZB6jBsyzno3xqQK5lxWF1itFn9oSgvsKPpWMdLVKgLhg/s0/saweria-igniel.png' title='Saweria'/>
<span>Donasi via Saweria</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<a href='https://trakteer.id/ID/tip' rel='nofollow noopener' target='_blank' title='Donasi via Trakteer'>
<img alt='Trakteer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieH10_JoSMU6bR0eymYzdd72g0uFT1CccEli9AytGV94ybITvbRlRfB4xQwAtvht6vNvrl5OU80ocHiHYj36pvxdxdJHtPsh1bBujNTW0SrzlyxqCkIzHjTU1Ofvnlxu2QPnEPtd1aGNwgbDeU8AAkFk5kqatpTf1QxysTl_k-Y8P7EQN-Abo3L-cNww/s0/trakteer-igniel.png' title='Trakteer'/>
<span>Donasi via Trakteer</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<a href='https://www.buymeacoffee.com/ID' rel='nofollow noopener' target='_blank' title='Buy Me A Coffee'>
<img alt='Buy Me A Coffee' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtz7jVrpYsRfjwZ8qbqeD-w0DPoW-lMuHEUkHx3M1_KtvKizO3DGRh32Ns2fc1TiwNTj8GSUp1Z8ABMu2A2iQtpRmxWyrlUQ9sMriF8i3RoCXKwUULop6QyS-bMNQ3QMtsG9INwzCqqpXr_1FDShUR9xO1ATJv0lnPbTe3qfwyWzjSaFyLYv7NjVS8g/s0/bmac-igniel.png' title='Buy Me A Coffee'/>
<span>Buy Me A Coffee</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<a href='#' onclick='return false;' title='Dana / OVO / GoPay'>
<svg viewBox='0 0 24 24'><path d='M18.04 13.55C17.62 13.96 17.38 14.55 17.44 15.18C17.53 16.26 18.52 17.05 19.6 17.05H21.5V18.24C21.5 20.31 19.81 22 17.74 22H6.26C4.19 22 2.5 20.31 2.5 18.24V11.51C2.5 9.44001 4.19 7.75 6.26 7.75H17.74C19.81 7.75 21.5 9.44001 21.5 11.51V12.95H19.48C18.92 12.95 18.41 13.17 18.04 13.55Z'/><path d='M2.5 12.4101V7.8401C2.5 6.6501 3.23 5.59006 4.34 5.17006L12.28 2.17006C13.52 1.70006 14.85 2.62009 14.85 3.95009V7.75008'/><path d='M22.5588 13.9702V16.0302C22.5588 16.5802 22.1188 17.0302 21.5588 17.0502H19.5988C18.5188 17.0502 17.5288 16.2602 17.4388 15.1802C17.3788 14.5502 17.6188 13.9602 18.0388 13.5502C18.4088 13.1702 18.9188 12.9502 19.4788 12.9502H21.5588C22.1188 12.9702 22.5588 13.4202 22.5588 13.9702Z'/><path d='M7 12H14'/></svg>
<div class='wallet'>
<span>Dana / OVO / GoPay</span>
<i>081234567890</i>
</div>
</a>
</div>
</div>  

Dan letakan codenya setelah code </article> adapun untuk wordpress bisa di car setelah artikel juga bisa menggunakan plugin ad insert, atau bila menggunakan tema seperti admin bisa di simpat di banner setelah artikel. Untuk lebih jelas lihat tabel berikut :

Silahkan simpan apabila sudah selesai, dan hasil seperti demo

Demo

Demikian tutorial membuat widget Donasi Ala Igniel, semoga bermanfaat bagi anda yang membutuhkan dan semoga ada donasi masuk yang tida terduga untuk memperpanjang hosting paling tidak domain yang kita gunakan.