Mengapa Kotak Donasi Perlu Dipasang?
Menulis Blog adalah aktivitas yang cukup menyita waktu, biaya, pikiran, dan tenaga. Blogger yang serius pasti melakukan hal berikut:
- Kita harus memutar otak untuk mendapatkan ide baru.
- Browsing sana sini untuk meriset kata kunci.
- Bertanya dan menonton youtube untuk menemukan topik yang bermanfaat buat pengunjung.
- Belum lagi kita harus membayar domain dan hosting setiap bulan atau tahunnya.
- Ditambah menulis kata-perkata sampai menjadi kalimat, paragraf, dan menjadi sebuat artikel yang utuh pasti melalui banyak pengeditan.
- Apalagi bagi seorang editor template, harus sering bereksperiment untuk menciptakan widget baru, analisa kode HTML, Javascript, dan CSS yang bahasanya bertumpuk-tumpuk yang kadang membuat kepala pusing jika harus berhadapan terus menerus dengan semua itu.
- Sementara penghasilan dari Google Adsense kadang tidak seberapa dan belum bisa menutupi semua itu.
Oleh karena alasan di atas, kita menyediakan suatu tempat yang bisa memicu semangat kita untuk menutupi rasa capek yang kadang menghampiri.
Sedikit sumbangan dari pengunjung, baik berupa Uang maupun Bintang bisa menjadi hal yang cukup membahagiakan walaupun terkadang jumlahnya tak seberapa.
Setidaknya kita sadar bahwa, apa yang kita tulis dihargai oleh orang lain dimana dengan kemurahan hatinya mau mendonasikan sebagian waktu dan rezekinya.
Tidak ada salahnya kan kita memberikan tempat untuk pengunjung yang berbesar hati seperti itu?
Apa Fungsi Widget Kotak Donasi?
Widget kotak donasi berfungsi untuk mencantumkan nama akun, nomor rekening, dan metode pembayaran lain agar pengunjung yang merasa terbantu dan ingin berterima kasih dalam bentuk materi atau dukungan real terhadap apa yang sudah kita tulis bisa terlaksana.
Fitur Apa Saja Yang Sebaiknya Ada Dalam Kotak Donasi?
Ada 3 elemen penting yang sebaiknya ada dalam kotak donasi, yaitu:
- Rekening Bank
Bagi mereka yang sudah memiliki rekening sendiri, bisa langsung transfer melalui m-Banking saat ingin berdonasi. - Dompet Digital (E-Wallet)Tidak semua orang punya rekening bank, apalagi yang masih di bawah umur. Makanya kita harus mencantumkan Akun Dompet Digital seperti Dana, Shopeepay, Ovo, Gopay, QRIS, dll.Jadi, anak sekolahpun bisa berdonasi di sana melalui transfer via aplikasi langsung ataupun lewat Alfamart dan Alfamidi.
- Rating Bintang
Rating Bintang lebih diperuntukkan bagi pengunjung yang tidak memiliki uang tapi ingin mendukung apa yang kita kerjakan.
Berikut tutorial cara membuat kotak donasi yang di request oleh Mas Bean di kolom komentar postingan sebelumnya. Semoga terpuaskan dengan artikel ini ya.
Cara Membuat Widget Kotak Donasi Blogger
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Cari kode ]]></b:skin>
- Letakkan kode CSS berikut tepat di atas ]]></b:skin>
.saiful-box{position:relative;width:100%;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:5px;padding:15px;margin:20px 0;display:flex;align-items:center;font-size:13px;transition:all .2s ease}.saiful-box .saiful-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#fff;border-radius:5px;border:1px solid transparent}.saiful-box .saiful-txt{flex-grow:1;width:calc(100% - 150px);padding:0 15px;line-height:20px}.saiful-box .saiful-sw{position:absolute;padding:1px 3px;margin-top:-80px;margin-left:45%;width:30px;height:30px;background:red;border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:1}#wc-check-dnt:checked ~ .saiful-box{padding-top:200px}#wc-check-dnt:checked ~ .saiful-box .saiful-hidden{visibility:visible;opacity:1}#wc-check-dnt:checked ~ .saiful-box .saiful-sw{margin-top:-450px}#wc-check-dnt:checked ~ .saiful-box .saiful-sw svg{transform:rotate(180deg)}#wc-check-dnt,#wc-check-bnk{display:none}#wc-check-bnk:checked ~ .saiful-st{visibility:hidden;opacity:0;position:absolute;margin-top:43px}#wc-check-bnk:checked ~ .saiful-pp{visibility:hidden;opacity:0;position:absolute;margin-top:-43px}#wc-check-bnk:checked ~ .saiful-rk{visibility:visible;opacity:1;position:absolute;margin-top:-230px}.saiful-hidden{position:absolute;width:100%;background-color:transparent;margin:-170px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}.saiful-hidden h2{font-size:20px;margin:10px auto 0;text-align:center}.saiful-hidden span{font-size:17px;color:#767676;margin-left:35px}.saiful-trn,.saiful-pp,.saiful-rk,.saiful-pp,.saiful-st{display:inline-block;width:calc(100% - 50px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:10px 25px 0;padding:10px;transition:all .2s ease}.saiful-st{margin:10px 25px 0}.saiful-pp{margin:10px 25px 0}.saiful-rk{margin:-10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease}.saiful-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:0;padding-bottom:3px}.big{width:50px;height:50px}.saiful-sw svg,.saiful-svg.line{fill:none!important;stroke:#fff;stroke-width:2}.saiful-svg.line{stroke:#767676}@media screen and (max-width:500px){.saiful-box .saiful-sw{margin-left:42%}}@media screen and (max-width:455px){.saiful-box .saiful-sw{margin-left:42%;margin-top:-90px}#wc-check-dnt:checked ~ .saiful-box .saiful-sw{margin-top:-460px}}.darkMode .saiful-box,.darkMode .saiful-rk,.darkMode .saiful-trn,.darkMode .saiful-pp,.darkMode .saiful-st,.darkMode .saiful-hidden span,.darkMode .saiful-icon{background-color:#2d2d30;color:#fefefe}.darkMode .saiful-svg{fill:#fefefe;stroke:#fefefe}.darkMode .saiful-box,.darkMode .saiful-sw,.darkMode .saiful-icon{border-color:rgba(255,255,255,.1)}
- Lalu salin kode HTML berikut:<b:if cond='data:view.isPost'><input id='wc-check-dnt' type='checkbox'/><div class='saiful-box'><label class='saiful-sw' for='wc-check-dnt'><svg viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></label><div class='saiful-icon'><svg class='saiful-svg line big' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 3.000000)'><path d='M19.1711429,11.6755238 L15.2844762,11.6755238 C13.8692381,11.6755238 12.721619,10.5279048 12.721619,9.11171429 C12.721619,7.69647619 13.8692381,6.54885714 15.2844762,6.54885714 L19.1406667,6.54885714'/><line x1='15.722' x2='15.4248571' y1='9.05314286' y2='9.05314286'/><line x1='5.60619048' x2='9.66619048' y1='5.14371429' y2='5.14371429'/><path d='M0.714095238,9.25314286 C0.714095238,2.84838095 3.03885714,0.714095238 10.0150476,0.714095238 C16.9902857,0.714095238 19.3150476,2.84838095 19.3150476,9.25314286 C19.3150476,15.6569524 16.9902857,17.7921905 10.0150476,17.7921905 C3.03885714,17.7921905 0.714095238,15.6569524 0.714095238,9.25314286 Z'/></g></svg></div><div class='saiful-hidden'><h2>Mau donasi lewat mana?</h2><label class='saiful-trn' for='wc-check-bnk'><svg class='saiful-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'/><line x1='1' x2='23' y1='10' y2='10'/></svg><span>Bank Transfer</span></label><input id='wc-check-bnk' type='checkbox'/><div><a class='saiful-pp' href='https://link.saifullah.id/QR' target='_blank'><svg class='saiful-svg' viewBox='0 0 23 23' xmlns='http://www.w3.org/2000/svg'><g><path d='M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z'/></g></svg><span>Scan Kode QRIS</span></a></div><div><a class='saiful-st' href='https://g.page/saifullahtv/review' target='_blank'><svg class='saiful-svg' viewBox='0 0 23 23' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg><span>Mau Kasih Bintang 5 Saja</span></a></div><div class='saiful-rk'>BRI - Saifullah (05680-10003-81533)<br/><br/>JAGO - Saifullah (1060-2675-3868)<br/><br/>BSI - Saifullah (0721-5491-550)</div></div><div class='saiful-txt'>Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.</div></div></b:if>
- Letakkan kode HTML tersebut di bawah kode <data:post.body/> atau di atas kode </article>
- Ganti kode warna biru dengan kata yang kalian inginkan, sedangan kode warna kuning ganti dengan data akun kalian.
Pengalaman Setelah Pasang Widget Kotak Donasi
Setelah pakai widget ini, memang ada sedikit perubahan yang saya lihat di akun saya. Ada uang masuk dari orang yang tidak dikenal. Nominalnya mulai dari 1 rupiah, 300 rupiah, 1.000 rupiah, bahkan ada yang puluhan dan ratusan ribu rupiah.
Selain itu Rating Bintang di Google Business saya juga bertambah, ini sangat penting bagi saya untuk meningkatkan kepercayaan pelanggan.
Saya sangat berterima kasih atas uang donasi tersebut baik yang kecil maupun besar. Semoga kebaikan hati kalian dibalas Tuhan dengan yang lebih banyak lagi. Aamiin.
Kesimpulan
Masih banyak orang baik dunia ini yang bisa menghargai karya dan ilmu pengetahuan kita. Tidak seberapa penting nominalnya, yang penting adalah nilai keikhlasannya. Jangan berhenti berbuat baik dan bermanfaat buat orang lain ya. As the result, widget kotak donasi is worth it guys!
Referensi:
- https://www.wendycode.com/2021/07/widget-kotak-donasi-show-hide.html