2 Cara Membuat Kotak Donasi di Blog: Saweria, Trakteer, Paypal

Selain dari program Google AdSense, kerja sama bagi hasil Google AdSense, jualan template blogger; sebuah web blog juga dapat menghasilkan uang dari yang namanya donasi. Donasi yang diterima, biasanya digunakan untuk memperpanjang masa sewa domain dan hosting situs web.

Bisa dibilang, donasi ialah alternatif selain dari Google AdSense.

Tutorial pemasangan kotak atau tombol donasi yang dibagikan kali ini, terdiri dari beberapa tombol penting seperti Paypal, Saweria, Trakteer, dan Buy Me a Coffee. Bisa juga ditambahkan dengan tombol donasi lainnya.

Dan yang paling keren, widget donasi yang akan dibagikan kali ini sudah mendukung fitur tombol tampil - tutup (Show / Hide).

Cara Memasang Tombol Kotak Donasi di Blog

1. Pada langkah pertama, salin (Copy) kode yang ada di bawah ini, tempelkan (Paste) tepat di atas kode </style> atau ]]></b:skin>

.donasi{position:relative;max-width:100%;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;display:flex;align-items:center;font-size:13px;transition:all .2s ease}  
.donasi .donasi-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}
.donasi .donasi-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.donasi .donasi-sw{position:absolute;padding:2px;margin-top:90px !important;margin-left:230px !important;width:30px;height:30px;background:#75b3ff;border-radius:50%;border:2px solid #eceff1;transition:all .2s ease;z-index:3}  
#checkd:checked ~ .donasi{padding-top:270px}
#checkd:checked ~ .donasi .donasi-h{visibility:visible;opacity:1}
#checkd:checked ~ .donasi .donasi-sw{margin-top:-450px}
#checkd:checked ~ .donasi .donasi-sw svg{transform:rotate(180deg)}
#checkd,#checkb{display:none}
#checkb:checked ~ .donasi-p{visibility:hidden;opacity:0;position:relative}
#checkb:checked ~ .donasi-q{visibility:hidden;opacity:0;position:relative}
.donasi-h{display:block;
position:absolute;
width:calc(100% - 10%);
background-color:transparent;margin:-330px auto auto -22px;visibility:hidden;opacity:0;transition:all .2s ease}
.donasi-h span{font-size:17px;color:#767676;margin-left:35px}
.donasi-p,.donasi-q
{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}
.donasi-p{position:relative}
donasi-q{position:relative}
.donasi-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.donasi-sw svg,.donasi-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.donasi-svg.line{stroke:#767676}
@media screen and (max-width:500px){.donasi .donasi-sw{margin-left:160px}}

2. Selanjutnya, tambahkan kode di bawah ini, di atas kode <data:post.body/>

<b:include data='post' name='post'/>
<input id='checkd' type='checkbox'/>
<div class='donasi'>
<label class='donasi-sw' for='checkd'>
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0' ></path></g></svg>
</label>
<div class='donasi-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,19V17H17L15.26,15.24L16.67,13.83L20.84,18L16.67,22.17L15.26,20.76L17,19H3M17,8V5H15V8H17M17,3C18.11,3 19,3.9 19,5V8C19,9.11 18.11,10 17,10H15V11A4,4 0 0,1 11,15H7A4,4 0 0,1 3,11V3H17Z" /></svg>
</div>
<div class='donasi-h'>
<input id='checkb' type='checkbox'/>
<a class='donasi-p' href='https://www.paypal.com/paypalme/xxxx' target='_blank' rel='nofollow noopener' title='Donasi via Paypal'>
<img class='donasi-svg' alt='Paypal' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MN2X9f_VrkD6kh6SBv3izBw4-n-wVDgKeHxDeEybpk_0vxRGTu7QqgM3oUyy6xyshltHexBQy3uDaFK5waaBeI0L0WvLu4FdtF3H1PYWK58yIs-Zr4kot1aEkYXCEQoW8Xwmbmwjz4d9HFZREaoGbr4um1XmrYytD0Zfzyt24KGkdPpdrYH2CObJvmU6/s1600/paypal.png' title='Donasi via Paypal' />
<span>Donasi via Paypal</span></a>
<input id='checkb' type='checkbox'/>
<a class='donasi-p' href='https://saweria.co/ID' target='_blank' rel='nofollow noopener' title='Donasi via Saweria'>
<img class='donasi-svg' alt='Saweria' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznN6iqnGb00DjHgC7KEVBxwkcAAG0aXECgZfTIF7jpxxFlblXI5AFiP1UfCbuJp2boISlqgCQvKV4UH-q_EbZwJ-xD1RD4zrEqHBkPg-UwQavoOW_B1jXXDtgQ7Dkvyw1yDMsUrz84h1x42A3koGwyD-OLAIalStEyShIPN6cYxRV8Gdk2CTlPPCIZPS1/s1600/saweria.png' title='Donasi via Saweria' />
<span>Donasi via Saweria</span></a>
<input id='checkb' type='checkbox'/>
<a class='donasi-p' href='https://trakteer.id/ID/tip' target='_blank' rel='nofollow noopener' title='Donasi via Trakteer'>
<img class='donasi-svg' alt='Trakteer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bZOJMrCOMyV7MzkP53LkMK8_P3CgvOTM5YcqG-_LGN2nYhsyAw9pwI8I1Szm_RIMqNy7a87XmcYWce9Lo7W5adgGsJFO5whD0ubRTZ75Wezu9IuSr80Az3WiRCf28AoXuxb_LM8U-7TQLaYY10Mq1qs5801NEv_KUhmrmcyEwdchM1HBByETnsM9sL2p/s1600/trakteer.png' title='Donasi via Trakteer' />
<span>Donasi via Trakteer</span></a>
<input id='checkb' type='checkbox'/>
<a class='donasi-p' href='https://www.buymeacoffee.com/ID' target='_blank' rel='nofollow noopener' title='Buy Me A Coffee'>
<img class='donasi-svg' alt='Buy Me A Coffee' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa7kduJqdtjJ7fFPmeeBpY-8BunT0fzL4rbRE6-fAxx1uZCkgtd-RFY_jYUu7SmYZwfRBcGb0lfGDRpcGSU5hXZwq-S1CqvP3YNbJ6isEFQW0t1Xru13G_y6zqdr6sey1cvaQDarwkYfxdvsGKy_IYMEsFnjumFybSOQa5XCARLBlsgKALdm_1lUAzaWZ/s1600/bmac.png' title='Buy Me A Coffee' />
<span>Buy Me A Coffee</span></a>
</div>
<div class='donasi-txt'>
Bismillah, traktir saya bisa di sini.
</div>
</div>

3. Silakan tekan tombol simpan template blogger.

Sebagai catatan, kode <data:post.body/> ada banyak di dalam template blog. Yang artinya, kalian harus menebaknya secara langsung.

Dan karena ada 2 cara, maka, kalian bisa menyimpan kode pada langkah No. 2 di atas pada widget HTML yang terletak di samping (Sidebar Wrapper) blog. Saya lebih memilih cara kedua ini 😃

Tutorial di atas saya temukan di blog Bung Huda (sumber di bawah). Setelah diteliti, ada beberapa bagian kode yang menurut saya kurang pas, tepatnya di bagian CSS. Melalui postingan ini, sudah saya setting agar lebih pas 100%.

Referensi:
https://www.bunghuda.com/2023/06/cara-membuat-kotak-donasi.html

Labels: Blogger,

Kalian baru saja membaca artikel 2 Cara Membuat Kotak Donasi di Blog: Saweria, Trakteer, Paypal. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.