Cara Membuat Widget Donasi Blogger / Website

0
Cara Membuat Widget Donasi Blogger atau Website

Anangzd
- Bagimana Cara Membuat Widget Donasi Blogger / Website ? Apa itu Widget Kotak Donasi blog ? adalah kotak informasi untuk memberikan donasi di kirim melalui beberapa pilihan dompet digital.

Jadi manfaat dari "Widget Donasi Blogger" yang berada di situs sudah tau ya. Selanjutnya bagaimana Cara Membuat Widget Kotak Donasi Blogger simpel rapi dengan kode HTML dan CSS di pasang pada tema blogger dan di widget tata letak dasbor blogger.

Kode Script Donasi CSS berfungsi untuk membuat susunan style tampilan pada kotak Donasi yang akan tampil di halaman website.

Kode Script Donasi HTML berfungsi untuk menampilkan teks pada kotak donasi, logo donasi dan yang lainya.

Tutorial Membuat Widget kotak donasi weblog

Kotak donasi yang akan di buat pemberian donasi Via dompet digital ada dua Transfer Bank dan PayPal. Tampilanya kotak donasi Show Hidden, dapat menghemat tempat. Pemasangan kotak donasi dapat di mana saja seperti di widget samping atau bawah melalui tata letak atau dalam tema dan halaman artikel secara manual. Apakah kalian tertarik dengan kotak donasi yang keren dan simpel. Jika ia silahkan praktekan langsung di blog anda, simak berikut ini.

Cara Membuat Widget Donasi Blogger

1. login www.blogger.com, masukan emil dan pasword akun google.

2. Setelah masuk di Dasbor Blogger > pilih menu Tema > HTML.

3. Pemasangan Code Script CSS di Tema. Cari kode ]]></b:skin> . Agar pecarian lebih cepat tekan tombol keyboard secara bersamaan CTRL + F lalau isi dengan kode ]]></b:skin> tekan enter. Paste/Tempel Code CSS di atas ]]></b:skin>. Simpan.

/* kotak donasi Ghost code */
.anangzd-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;}  
.anangzd-box .anangzd-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}
.anangzd-box .anangzd-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.anangzd-box .anangzd-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 ~ .anangzd-box{padding-top:200px}
#wc-check-dnt:checked ~ .anangzd-box .anangzd-hidden{visibility:visible;opacity:1}
#wc-check-dnt:checked ~ .anangzd-box .anangzd-sw{margin-top:-450px}
#wc-check-dnt:checked ~ .anangzd-box .anangzd-sw svg{transform:rotate(180deg)}
#wc-check-dnt,#wc-check-bnk{display:none}
#wc-check-bnk:checked ~ .anangzd-pp{visibility:hidden;opacity:0;position:relative}
#wc-check-bnk:checked ~ .anangzd-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.anangzd-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.anangzd-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.anangzd-hidden span{font-size:17px;color:#767676;margin-left:35px}
.anangzd-trn,.anangzd-pp,.anangzd-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}
.anangzd-pp{position:absolute}
.anangzd-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.anangzd-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.anangzd-sw svg,.anangzd-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.anangzd-svg.line{stroke:#767676}
@media screen and (max-width:500px){.anangzd-box .anangzd-sw{margin-left:160px}}
@media screen and (max-width:455px){.anangzd-box .anangzd-sw{margin:-90px auto auto 130px}#wc-check-dnt:checked ~ .anangzd-box .anangzd-sw{margin-top:-460px}}
  
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .anangzd-box,.darkMode .anangzd-rk,.darkMode .anangzd-trn,.darkMode .anangzd-pp,.darkMode .anangzd-hidden span,.darkMode .anangzd-icon{background-color:#2d2d30;color:#fefefe}
.darkMode .anangzd-svg{fill:#fefefe;stroke:#fefefe}
.darkMode .anangzd-box,.darkMode .anangzd-sw,.darkMode .anangzd-icon{border-color:rgba(255,255,255,.1)}{codeBox}

3. Buka menu Tata Letak > Tambah Widget baru > Isi dengan kode HTML di bawah ini.
<input id='wc-check-dnt' type='checkbox'/>
<div class='anangzd-box'>
<label class='anangzd-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='anangzd-icon'><svg class='anangzd-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='anangzd-hidden'>
<h2>Mau donasi lewat mana?</h2> 
<label class='anangzd-trn' for='wc-check-bnk'>
<svg class='anangzd-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='anangzd-pp' href='https://www.paypal.com/paypalme/xxxx' target='_blank'>
<svg class='anangzd-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='anangzd-rk'>
Bank Mandiri - An.wendy yulianto / Rek - 2345xxx
</div>
</div>
<div class='anangzd-txt'>
Artikel ini bermanfaat untuk anda ? Yuk Support dengan Donasi. Klik icon panah di atas.
</div>
</div>{codeBox}

4. Simpan. Lihat hasilnya di halaman utama apakah box donasi sudah muncul dengan sepurna yang kita inginkan.

Begitu Cara Menambahkan Tombol Donasi di Blog dengan mudah tanpa ribet harus mengurangi atau mengati kode tema template aslinya. Dengan adanya tutorial ini semoga membantu membuat menu donasi pada situs blog kalian. Terima kasih sudah berkujung di anangzd.com.

Post a Comment

0 Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Top