Codepelajar – Donation box widget adalah alat yang memungkinkan Anda untuk mengumpulkan sumbangan secara online lewat blog pribadi Anda.
Widget ini cocok untuk berbagai artikel blog dan tentunya dapat menghasilkan banyak uang untuk membangun blog agar lebih besar lagi, ditambah bahwa penghasilan adsense dapat cukup kecil apalagi jika situs belum disetujui oleh pihak adsense.
Cara Membuat Donation Box
Buka Blogspot > tema > edit html salin css di bawah ini dan tempel di atas kode ]]></b:skin> atau code di atas </style>
/* kotak donasi by codepelajar */
.wc-dnt-box{position:relative;max-width:500px;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;}
.wc-dnt-box .wc-dnt-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px; background:#f1f1f0;border-radius:5px;border:1px solid transparent}
.wc-dnt-box .wc-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.wc-dnt-box .wc-dnt-sw{position:absolute;padding:1px 3px;margin-top:-80px;margin-left:230px;width:30px;height:30px;background:#f89000;border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:3}
#wc-check-dnt:checked ~ .wc-dnt-box{padding-top:200px}
#wc-check-dnt:checked ~ .wc-dnt-box .wc-dnt-hidden{visibility:visible;opacity:1}
#wc-check-dnt:checked ~ .wc-dnt-box .wc-dnt-sw{margin-top:-450px}
#wc-check-dnt:checked ~ .wc-dnt-box .wc-dnt-sw svg{transform:rotate(180deg)}
#wc-check-dnt,#wc-check-bnk{display:none}
#wc-check-bnk:checked ~ .wc-dnt-pp{visibility:hidden;opacity:0;position:relative}
#wc-check-bnk:checked ~ .wc-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.wc-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.wc-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.wc-dnt-hidden span{font-size:17px;color:#767676;margin-left:35px}
.wc-dnt-trn,.wc-dnt-pp,.wc-dnt-rk{display:inline-block;width:calc(100% - 30px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:10px 25px 0;padding:10px;transition:all .2s ease}
.wc-dnt-pp{position:absolute}
.wc-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.wc-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.wc-dnt-sw svg,.wc-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.wc-dnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.wc-dnt-box .wc-dnt-sw{margin-left:160px}}
@media screen and (max-width:455px){.wc-dnt-box .wc-dnt-sw{margin:-90px auto auto 130px}#wc-check-dnt:checked ~ .wc-dnt-box .wc-dnt-sw{margin-top:-460px}}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-dnt-box,.darkMode .wc-dnt-rk,.darkMode .wc-dnt-trn,.darkMode .wc-dnt-pp,.darkMode .wc-dnt-hidden span,.darkMode .wc-dnt-icon{background-color:#2d2d30;color:#fefefe}
.darkMode .wc-dnt-svg{fill:#fefefe;stroke:#fefefe}
.darkMode .wc-dnt-box,.darkMode .wc-dnt-sw,.darkMode .wc-dnt-icon{border-color:rgba(255,255,255,.1)}
Jika sudah, silahkan salin kode dibawah ini dan tempatkan di bawah kode <data:post.body/>
<input id='wc-check-dnt' type='checkbox'/>
<div class='wc-dnt-box'>
<label class='wc-dnt-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='wc-dnt-icon'><svg class='wc-dnt-svg line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 8h1a4 4 0 0 1 0 8h-1'></path><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'></path><line x1='6' y1='1' x2='6' y2='4'></line><line x1='10' y1='1' x2='10' y2='4'></line><line x1='14' y1='1' x2='14' y2='4'></line></svg></div>
<div class='wc-dnt-hidden'>
<h2>Mau donasi lewat mana?</h2>
<label class='wc-dnt-trn' for='wc-check-bnk'>
<svg class='wc-dnt-svg line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
<span>Bank Transfer</span></label>
<input id='wc-check-bnk' type='checkbox'/>
<a class='wc-dnt-pp' href='https://www.paypal.com/paypalme/xxxx' target='_blank'>
<svg class='wc-dnt-svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
<span>Paypal</span></a>
<div class='wc-dnt-rk'>
Bank Mandiri - Codepelajar / Rek - 2345xxx
</div>
</div>
<div class='wc-dnt-txt'>
Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas
</div>
</div>
Biasanya kode <data:post.body/> dimiliki banyak oleh setiap tema, tempelkan saja dibagian paling atas
Ganti url Paypal dengan milik Anda sendiri dan simpan, maka secara otomatis widget ini akan berada pada posisi yang sesuai pada halaman depan dengan tampilan yang bagus untuk menarik perhatian.
Oke mungkin itu saja yang dapat Codepelajar berikan semoga dapat diterapkan dibagian blog Anda dan dapat menjadi blog yang baik.
