How to Make a Show hide Donation Box Widget


How to Make a Show hide Donation Box Widget_The Donation box is a useful widget that we can add to our blog. 
the good news is this widget is suitable for the whole Niche.

1. Why The Donation Box Widget Needs To Be Installed ?

Blogging is an activity that takes a lot of time, costs a lot of thought and is not small, a serious blogger will do:

1. think a lot to determine the idea

2. watch helpful tutorials on YouTube to determine useful topics

3. browse here and there to do keyword research

4. pay a lot of domain and hosting fees

5. while the income from google adsense that has not been able to cover all that.

for the reasons above, we should provide a place to recover from fatigue and tiredness. 

a little donation from visitors, in the form of a little money can give happiness to bloggers.

at least we are aware that what we have written so far is appreciated by giving a little sustenance.

Donate Widget Function

The donation box provides information about the account name, account number, and other payment methods.

Donation Box Feature

1.Bank Account

For those who already have their own account, you can transfer via e-banking.

2. Digital Wallet

not everyone has a bank account, that’s why we provide a Paypal e-wallet feature so that everyone can donate.

How To Make A Donation Box Widget

1. open blogger dashboard > themes > edit html > copy the css code below and place it just above the code ]]></b:skin>

/* kotak donasi by admin code */
.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)}

2.then put the html code right under the <data:post.body> code, there can be more than one code, however, if you use the fleto pro template then you will only find 1 code.

<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>Where do you want to donate?</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 BCA - admin / Rek - 2345xxx
</div>
</div>
<div class='wc-dnt-txt'>
Treat the creator to coffee by giving a small donation. click the arrow icon above 
</div>
</div>
the part that I marked please be replaced using Paypal’s own URL, and just click save.
so many tutorials on making a donation box widget, hopefully it’s useful…..
This tutorial is from blogger Wendy Code
simplebloggertutorial
© Copyright 2023, All Rights Reserved