Kotak donasi maupun widget donation box merupakan salah satu widget yang sangat bermanfaat bagi seorang content writer yang memiliki sebuah blog untuk membagikan pengalaman maupun informasi yang bermanfaat bagi pengunjung. Apabila anda menuliskan artikel yang bermanfaat serta membantu pembaca anda, maka pembaca anda akan berterimakasih dengan menyumbangkan sedikit rejekinya kepada anda. Oleh karena itulah, widget kotak donasi di blogger ini cukup penting.
Selain itu, dengan memasang widget kotak donation di bawah postingan blogger juga tentunya memudahkan audience untuk menyumbangkan rejekinya kepada anda melalui widget donasi yang sudah disediakan. Baik itu melalui Transfer Bank, PayPal, QRIS, dan masih banyak lagi tergantung dengan selera masing-masing.
Kebanyakan yang memasang widget kotak donation ini adalah seorang blogger yang ingin mendapatkan penghasilan dari seseorang yang sudah mencari referensi pada blog kita. Oleh karena itu, diantara mereka memasang widget ini mengingat penghasilan dari Google Adsense dan lainnyua belum bisa menutupi.
Mungkin sudah banyak juga yang memberikan tutorial memasang widget kotak donation di blogger dan memiliki tampilan yang menarik dan berbeda-beda. Oleh karena itu, pada kesempatan kali ini saya akan membagikan tutorial cara membuat widget kotak donation di blogger show dan hide. Widget yang saya berikan ini juga tentunya bisa dirubah dari segi kalimat, icon, dan lain sebagainya.
Cara Membuat Widget Kotak Donation di Blogger
Sebelum melanjutkan ke tutorialnya, alangkah baiknya anda membuat link yang akan di donasikan seperti link PayPal, Trakteer, Saweria, dan lain sebagainya. Apabila anda sudah mencatat link dan juga nomor rekening yang akan didonasikan, maka langsung saja simak tutorial dibawah ini secara teliti agar tidak terjadinya error. Sebelum melakukannya, sebaiknya back-up terlebih dahulu template yang anda gunakan.
- Silahkan masuk ke akun Blogger masing-masing.
- Selanjutnya pilih Tema » Edit HTML » selanjutnya cari kode
]]></b:skin>» dan letakkan css dibawah ini tepat diatas kode tersebut.
/* kotak donasi by mahes.web.id */
.mb-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;}
.mb-dnt-box .mb-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}
.mb-dnt-box .mb-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.mb-dnt-box .mb-dnt-sw{position:absolute;padding:1px 3px;margin-top:-80px;margin-left:230px;width:30px;height:30px;background:var(--linkB);border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:3}
#mb-check-dnt:checked ~ .mb-dnt-box{padding-top:200px}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-hidden{visibility:visible;opacity:1}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw{margin-top:-450px}
#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw svg{transform:rotate(180deg)}
#mb-check-dnt,#mb-check-bnk{display:none}
#mb-check-bnk:checked ~ .mb-dnt-pp{visibility:hidden;opacity:0;position:relative}
#mb-check-bnk:checked ~ .mb-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.mb-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.mb-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.mb-dnt-hidden span{font-size:17px;color:#767676;margin-left:35px}
.mb-dnt-trn,.mb-dnt-pp,.mb-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}
.mb-dnt-pp{position:absolute}
.mb-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.mb-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.mb-dnt-sw svg,.mb-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.mb-dnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.mb-dnt-box .mb-dnt-sw{margin-left:160px}}
@media screen and (max-width:455px){.mb-dnt-box .mb-dnt-sw{margin:-90px auto auto 130px}#mb-check-dnt:checked ~ .mb-dnt-box .mb-dnt-sw{margin-top:-460px}}- Lalu anda bisa letakkan html dibawah ini tepat dibawah kode
<data:post.body/>biasanya kode ini ada lebih dari satu tergantung dengan template yang digunakan, dan ada juga yang hanya tersedia satu kode seperti ini saja.
- Lalu anda bisa letakkan html dibawah ini tepat dibawah kode
<!-- Donate Box --> <input id='mb-check-dnt' type='checkbox'/> <div class='mb-dnt-box'> <label class='mb-dnt-sw' for='mb-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='mb-dnt-icon'><svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><line x1='6' x2='6' y1='1' y2='4'/><line x1='10' x2='10' y1='1' y2='4'/><line x1='14' x2='14' y1='1' y2='4'/></svg></div> <div class='mb-dnt-hidden'> <h2>Mau donasi lewat mana?</h2> <label class='mb-dnt-trn' for='mb-check-bnk'> <svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'/><line x1='1' x2='23' y1='10' y2='10'/></svg> <span>Bank Transfer</span></label> <input id='mb-check-bnk' type='checkbox'/> <a class='mb-dnt-pp' href='https://trakteer.id/mahesaputra' target='_blank'> <svg class='mb-dnt-svg line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><line x1='6' x2='6' y1='1' y2='4'/><line x1='10' x2='10' y1='1' y2='4'/><line x1='14' x2='14' y1='1' y2='4'/></svg> <span>Traktir Kopi</span></a> <div class='mb-dnt-rk'> Bank BCA - An.Mahes.web.id / Rek - 648xxxx </div> </div> <div class='mb-dnt-txt'> Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas </div> </div> <!-- Donate Box End -->
- Bagian yang sudah saya tandai dengan berwarna kuning diatas bisa anda ganti dengan url trakteer maupun saweria. Selain itu, bagian yang sudah saya tandai pada bagian Bank Transfer bisa anda rubah sesuai dengan Nomor Rekening dan Pemilik Rekening sesuai dengan pemilik masing-masing.
- Pada kalimat yang sudah saya tandai diatas juga bisa anda rubah menjadi sesuai dengan kalimat yang ingin anda gunakan dan dapat menarik banyak orang untuk
- Kemudian klik simpan dan lihat hasilnya.
- Selesai.
Itulah tutorial cara membuat widget kotak donation box yang bisa anda terapkan, apabila ada pertanyaan yang kurang dipahami. Silahkan langsung komentar saja pada kolom yang sudah disediakan, apabila anda berkenan untuk menyumbangkan sedikit rejekinya silahkan sumbangkan sedikit melalui widget donation box yang sudah ada di blog ini. Selamat mencoba!
