donation box widget html code show & hide

 

donation box widget html code show & hide

Hello to everyone, on this occasion, I'm back to share your requests again, namely the show hide donation box widget with html and css on blogger.

This widget is regulated by IMRAN SHAH via youtube comments, for those of you who want to regulate tutorials or widgets, please comment on my youtube and don't forget to subscribe too.

If you want to regulate your widget, you can design it first using Photoshop or any photo editor and send it to my email, if it's good and interesting, I'll make an html version.

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.

Donation Box Widget Show Hide

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>

/* donation box by Blogger Store */
    .bs-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;}  
    .bs-dnt-box .bs-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}
    .bs-dnt-box .bs-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
    .bs-dnt-box .bs-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}  
    #bs-check-dnt:checked ~ .bs-dnt-box{padding-top:200px}
    #bs-check-dnt:checked ~ .bs-dnt-box .bs-dnt-hidden{visibility:visible;opacity:1}
    #bs-check-dnt:checked ~ .bs-dnt-box .bs-dnt-sw{margin-top:-450px}
    #bs-check-dnt:checked ~ .bs-dnt-box .bs-dnt-sw svg{transform:rotate(180deg)}
    #bs-check-dnt,#bs-check-bnk{display:none}
    #bs-check-bnk:checked ~ .bs-dnt-pp{visibility:hidden;opacity:0;position:relative}
    #bs-check-bnk:checked ~ .bs-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
    .bs-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
    .bs-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
    .bs-dnt-hidden span{font-size:17px;color:#767676;margin-left:35px}
    .bs-dnt-trn,.bs-dnt-pp,.bs-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}
    .bs-dnt-pp{position:absolute}
    .bs-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
    .bs-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
    .bs-dnt-sw svg,.bs-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
    .bs-dnt-svg.line{stroke:#767676}
    @media screen and (max-width:500px){.bs-dnt-box .bs-dnt-sw{margin-left:160px}}
    @media screen and (max-width:455px){.bs-dnt-box .bs-dnt-sw{margin:-90px auto auto 130px}#bs-check-dnt:checked ~ .bs-dnt-box .bs-dnt-sw{margin-top:-460px}}
      
    /* CSS darkmode adjust the class if different or delete this section */
    .darkMode .bs-dnt-box,.darkMode .bs-dnt-rk,.darkMode .bs-dnt-trn,.darkMode .bs-dnt-pp,.darkMode .bs-dnt-hidden span,.darkMode .bs-dnt-icon{background-color:#2d2d30;color:#fefefe}
    .darkMode .bs-dnt-svg{fill:#fefefe;stroke:#fefefe}
    .darkMode .bs-dnt-box,.darkMode .bs-dnt-sw,.darkMode .bs-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 postEntry if you don't know just try 1 1, if the median template -ui there is only 1 such code.

<input id='bs-check-dnt' type='checkbox'/>
    <div class='bs-dnt-box'>
    <label class='bs-dnt-sw' for='bs-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='bs-dnt-icon'><svg class='bs-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='bs-dnt-hidden'>
    <h2>Mau donasi lewat mana?</h2> 
    <label class='bs-dnt-trn' for='bs-check-bnk'>
    <svg class='bs-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='bs-check-bnk' type='checkbox'/>
    <a class='bs-dnt-pp' href='https://www.paypal.com/paypalme/xxxx' target='_blank'>
    <svg class='bs-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='bs-dnt-rk'>
Meezan Bank-Malir City Branch, Karachi
Account Number: 99760104486775
IBAN: PK41MEZN0099760104486775
    </div>
    </div>
    <div class='bs-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 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.