Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat widget kotak donasi show hide dengan mudah di blogger.
Widget donasi ini pertama saya jumpai pada blog saifullah yang terletk pada di bawah artikel dan berbentuk show hide yang artinya ketika kalian klik show maka akan muncul kotak donasi dan ketika kalian klik hide maka akan menutup kotak donasinya.
Widget ini sangat cocok untuk semua niche, karena kalian nge blog juga membutuhkan modal seperti menyewa hosting dan domain maupun membeli kuota. Maka dari itu tidak ada salahnya juga kan jika blog kalian di pasang widget kotak donasi show hide ini, karena jika ada pengunjung yang menyukai blog atau artikel kalian mungkin bisa pengunjung akan memberikan donasi sebagai ucapan terimakasih karena telah memberikan informasi yang sangat penting buat pengunjung.
Untuk widget kotak donasi banyak sekali yang membuat tutorialnya dan sudah tersebar banyak di google dengan berbagai macam bentuk dan tampilan, tapi jika kalian ingin mencoba widget kotak donasi show hide ini apasalahnya jika kalian memasangnya di blog kalian.
Widget ini tidak memberatkan blog kalian karena menggunakan CSS dan HTML, jadi kecepatan blog kalian tetap kenceng dan wuss...
Cara Membuat Widget Kotak Donasi Show Hide Dengan Mudah di Blogger
- Silahkan kalian masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
/* kotak donasi by telatngoding.com */
.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)}- Selanjutnya silahkan cari kode <data:post.body/> jika sudah ketemu salin kode di bawah ini dan leyakan tepat di bawah kode <data:post.body/>
Jika kode tersebut terdapat lebih dari satu silahkan coba satu persatu.
<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 - Atas nama telatngoding.com / 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>- Simpan tema kalian dan selesai.
Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan selera kalian.
Untuk tampilannya seperi gambar di bawah ini:
- Posisi tertutup / hide
- Posisi terbuka / show
Widget ini bisa kalian modif lagi tapi setidaknya kalian harus menguasi css dan html supaya nanti hasil akhirnya bagus dan tidak error.
Seperti itulah Cara Membuat Widget Kotak Donasi Show Hide Dengan Mudah di Blogger terimakasih atas kunjungannya, semoga bermanfaat dan salam blogger.