widget kotak donasi show hide

widget kotak donasi show hide dengan html dan css saja

Hallo semua pada kesempatan kali ini saya kembali membuatkan reguestan kalian lagi yaitu widget kotak donasi show hide dengan html dan css di blogger.

widget ini di reguest oleh Alena Farhana melalui komentar youtube, buat kalian yang mau reguest tutorial maupun widget silakan bisa komentar di youtube saya dan jangan lupa subcribe juga.

jika ingin reguest widget kalian bisa desain dulu menggunakan photoshop atau foto editor apa aja dan bisa kirimkan ke email saya, jika bagus dan menarik akan saya buatkan versi htmlnya.

widget kotak donasi ini cocok sekali untuk semua niche blog, kita ngeblog juga butuh modal seperti membayar biaya sewah domain, membeli kuota internet dan lain - lain.

sedangkan saja mungkin penghasilan adsanse kalian juga masih sedikit sehingga tidak ketutup, dan membutuhkan biaya tambahan, atau bahkan blog kalian belum memenuhi syarat dari google adsanse sehingga belum bisa menghasilkan uang dari blog kalian.

maka itu tidak ada salahnya kita memasang kotak donasi di blog kita, mungkin saja ada beberapa orang yang tertarik dengan konten yang kita buat dan ingin memberi sedikit donasi sebagai tanda terima kasih.

sebenarnya widget donasi ini banyak sekali yang share di luar sana, namun jika kalian belum ketemu style yang cocok maka kalian bisa coba yang akan saya bagikan kali ini.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Kotak Donasi Show Hide

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* kotak donasi by wendy 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)}

lanjut meletakkan html ini tepat di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1, tergantung template yang kalian gunakan cari saja yang berada dalam post-entry atau postEntry jika tidak tau coba saja 1 1, kalau template median-ui hanya ada 1 saja kode seperti itu.

<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 - An.wendy yulianto / 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>

bagian yang saya tandai silakan di ganti dengan url paypal kalian dan selebihnya silakan di sesuaikan sendiri. jika sudah jangan lupa untuk klik simpan.

ok jadi sekian widget kotak donasi show hide semoga bermanfaat dan terima kasih telah berkunjung.