Hello everyone, on this occasion, I'm back to share again, namely the show hide donation box widget with html and css on blogger.
This donation box widget is perfect for all niche blogs, blogging also needs capital such as paying domain rental fees, buying internet quota and others.
While maybe your Adsense income is also still small so it doesn't close, and requires additional costs, or even your blog doesn't meet the requirements of Google Adsense so you can't make money from your blog. Then it doesn't hurt us to put a donation box on our blog, maybe there are some people who are interested in the content we create and want to make a small donation as a sign of gratitude.
Actually, there are a lot of donation widgets out there, but if you haven't found the right style, then you can try what I'm going to share this time.
for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.
How to Add Donation Box Code in Blogger
Please go to blogger > Themes > Edit HTML copy the css below and place it above the code ]]></b:skin>
/* Donation Box by TrickPk */
.trickpk-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;}
.trickpk-dnt-box .trickpk-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}
.trickpk-dnt-box .trickpk-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.trickpk-dnt-box .trickpk-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:10}
#trickpk-check-dnt:checked ~ .trickpk-dnt-box{padding-top:200px}
#trickpk-check-dnt:checked ~ .trickpk-dnt-box .trickpk-dnt-hidden{visibility:visible;opacity:1}
#trickpk-check-dnt:checked ~ .trickpk-dnt-box .trickpk-dnt-sw{margin-top:-450px}
#trickpk-check-dnt:checked ~ .trickpk-dnt-box .trickpk-dnt-sw svg{transform:rotate(180deg)}
#trickpk-check-dnt,#trickpk-check-bnk{display:none}
#trickpk-check-bnk:checked ~ .trickpk-dnt-pp{visibility:hidden;opacity:0;position:relative}
#trickpk-check-bnk:checked ~ .trickpk-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.trickpk-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.trickpk-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.trickpk-dnt-hidden span{font-size:17px;color:#767676;margin-left:35px}
.trickpk-dnt-trn,.trickpk-dnt-pp,.trickpk-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}
.trickpk-dnt-pp{position:absolute}
.trickpk-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.trickpk-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.trickpk-dnt-sw svg,.trickpk-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.trickpk-dnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.trickpk-dnt-box .trickpk-dnt-sw{margin-left:160px}}
@media screen and (max-width:455px){.trickpk-dnt-box .trickpk-dnt-sw{margin:-90px auto auto 130px}#trickpk-check-dnt:checked ~ .trickpk-dnt-box .trickpk-dnt-sw{margin-top:-460px}}
/* CSS darkmode adjust the class if different or delete this section by TrickPk*/
.darkMode .trickpk-dnt-box,.darkMode .trickpk-dnt-rk,.darkMode .trickpk-dnt-trn,.darkMode .trickpk-dnt-pp,.darkMode .trickpk-dnt-hidden span,.darkMode .trickpk-dnt-icon{background-color:#2d2d30;color:#fefefe}
.darkMode .trickpk-dnt-svg{fill:#fefefe;stroke:#fefefe}
.darkMode .trickpk-dnt-box,.darkMode .trickpk-dnt-sw,.darkMode .trickpk-dnt-icon{border-color:rgba(255,255,255,.1)}
Then put this html right under the <data:post.body/> code usually there are more than 1, depending on the template you are using just look for the one in post-entry or pos tEntry if you don't know just try 1 1, if the median template -ui there is only 1 such code.
<center><input id='trickpk-check-dnt' type='checkbox'/>
<div class='trickpk-dnt-box'>
<label class='trickpk-dnt-sw' for='trickpk-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='trickpk-dnt-icon'><svg class='trickpk-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='trickpk-dnt-hidden'>
<h2>Where do you want to donate?</h2>
<label class='trickpk-dnt-trn' for='trickpk-check-bnk'>
<svg class='trickpk-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='trickpk-check-bnk' type='checkbox'/>
<a class='trickpk-dnt-pp' href='https://www.paypal.com/paypalme/themezest' target='_blank'>
<svg class='trickpk-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='trickpk-dnt-rk'>
Bank UBL - Mubassir Ali / Acc - 5345xxx
</div>
</div>
<div class='trickpk-dnt-txt'>
Treat the creator to coffee by giving a small donation. click the arrow icon above
</div>
</div></center>
The part that I marked please replace it with your paypal url and the rest please adjust it yourself. if you have don't forget to click save.
Ok, so that's the show hide donation box widget hope it's useful and thanks for visiting.