Cara Menghasilkan Widget Kotak Sokongan Di Blog / Website

Saifulah.id - Kotak Donasi (Donation Box Widget) yakni salah satu widget berharga yang bisa kita tambahkan di dalam Blog. Kabar bahagianya widget kotak bantuan ini cocok untuk semua Niche Blog.  Tapi, sebelum masuk ke tutorialnya, ada baiknya kita diskusikan dahulu mengapa kita perlu widget yang satu ini.

Mengapa Kotak Donasi Perlu Dipasang?

Menulis Blog yakni acara yang cukup menguras waktu, biaya, pikiran, dan tenaga. Blogger yang serius niscaya menjalankan hal berikut:

1. Kita mesti memutar otak untuk mendapat inspirasi baru.
2. Browsing sana sini untuk meriset kata kunci.
3. Bertanya dan menonton youtube untuk mendapatkan topik yang berharga buat pengunjung.
4. Belum lagi kita mesti mengeluarkan duit domain dan hosting setiap bulan atau tahunnya.
5. Ditambah menulis kata-perkata hingga menjadi kalimat, paragraf, dan menjadi sebuat postingan yang utuh niscaya lewat banyak pengeditan.
6. Apalagi bagi seorang editor template, mesti sering bereksperiment untuk bikin widget baru, evaluasi aba-aba HTML, Javascript, dan CSS yang bahasanya bertumpuk-tumpuk yang kadang bikin kepala sakit kepala apabila mesti berhadapan terus menerus dengan semua itu.
7. Sementara penghasilan dari Google Adsense kadang tidak seberapa dan belum dapat menutupi semua itu.

Oleh alasannya argumentasi di atas, kita menawarkan sebuah wilayah yang bisa menyebabkan semangat kita untuk menutupi rasa kecapekan yang kadang menghampiri.

Sedikit sumbangan dari pengunjung, baik berupa Uang maupun Bintang bisa menjadi hal yang cukup membahagiakan meskipun acap kali 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 menampilkan wilayah untuk hadirin yang berbesar hati menyerupai itu?

Apa Fungsi Widget Kotak Donasi?

Widget kotak bantuan berfungsi untuk mencantumkan nama akun, nomor rekening, dan sistem pembayaran lain mudah-mudahan hadirin yang merasa terbantu dan ingin berterima kasih dalam bentuk materi atau bantuan real kepada apa yang sudah kita tulis dapat terlaksana.

Fitur Apa Saja Yang Sebaiknya Ada Dalam Kotak Donasi?

Ada 3 elemen penting yang semestinya ada dalam kotak donasi, yaitu:

1. Rekening Bank
   Bagi mereka yang sudah mempunyai rekening sendiri, dapat pribadi transfer lewat m-Banking di saat ingin berdonasi.
   
   
2. Dompet Digital (E-Wallet)
   
   Tidak siapa pun punya rekening bank, terlebih yang masih di bawah umur. Makanya kita mesti mencantumkan Akun Dompet Digital menyerupai Dana, Shopeepay, Ovo, Gopay, QRIS, dll.
   
   
   Jadi, anak sekolahpun dapat berdonasi di sana lewat transfer via aplikasi pribadi ataupun lewat Alfamart dan Alfamidi.
   
   
3. Rating Bintang
   Rating Bintang lebih didedikasikan bagi hadirin yang tidak mempunyai duit namun ingin mendukung apa yang kita kerjakan.

Berikut bimbingan cara bikin kotak bantuan yang di request oleh Mas Bean di kolom komentar postingan sebelumnya. Semoga terpuaskan dengan postingan ini ya.

Cara Membuat Widget Kotak Donasi Blogger

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Cari kode  ]]></b:skin> 
6. Letakkan aba-aba CSS berikut sempurna 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)}

7. Lalu salin aba-aba 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 bantuan 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 postingan ini? Ayo dukung dengan donasi. Klik tombol merah.

   </div>

   </div>

   </b:if>
8. Letakkan aba-aba HTML tersebut di bawah kode  <data:post.body/>  atau di atas kode  </article> 
9. Ganti aba-aba warna biru dengan kata yang kalian inginkan, sedangan aba-aba warna kuning ganti dengan data akun kalian.

Pengalaman Setelah Pasang Widget Kotak Donasi

Setelah pakai widget ini, memang ada sedikit pergantian yang saya lihat di akun saya. Ada duit 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 sungguh penting bagi saya untuk memajukan keyakinan pelanggan.

Saya sungguh berterima kasih atas duit bantuan 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 wawasan kita. Tidak seberapa penting nominalnya, yang penting yakni nilai keikhlasannya. Jangan berhenti berbuat baik dan berharga buat orang lain ya. As the result, widget kotak bantuan is worth it guys!

Tweet