Cara Membuat Kotak Donasi Keren di Blogger
Hallo sobat, selamat datang di blog saya. Kali ini saya akan membagikan tentang fitur atau widget kotak donasi keren untuk blogspot. Kotak donasi ini cocok untuk semua niche blogger, seperti tutorial, pendidikan atau edukasi, teknologi dan lain-lain.
Dengan cara menambahkan widget kotak donasi ini paling mungkin dapat menambah pundi-pundi selain dari adsense di blog. Mungkin yang pendapatan adsensenya kecil, ini adalah alternatif pendongkrak cuan. Tapi, konten artikel di blogmu adalah kunci utamanya.
Percuma juga kalo konten yang asal-asalan dan belum paham tentang teknik optimasi. Seberapa banyak artikel yang telah di publikasikan tapi tidak terindek oleh google ya buang-buang waktu. Kamu juga bisa baca ini terlebih dahulu : cara index artikel secara manual dengan software.
Beda dengan di Wordpress ada plugin tersendiri untuk menambahkan widget kotak donasi di blog ini. Cara membuat kotak donasi di blogspot di buat secara manual dengan menggunakan css dan html. Tenang, saya akan bagikan dengan style atau gaya widget show and hide atau membuka dan menutup.
Apabila kamu tertarik, berikut contoh demonya.
Cara Membuat Kotak Donasi di Blogspot
Pertama masuk dulu ke tema > edit html > pastekan kode diatas </style> atau ]]></b:skin>.
/* Kotak Donasi */
.donasi{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;}
.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% - 18%);
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}}
Kamu dapat nyesuaikan sendiri warna tombol show and hide
Setelah selesai paste kode dibawah ini didalam template. Kamu dapat mencantumkan widget ini di bawah postingan setelah <data:post.body/></div> setiap template mungkin berbeda, seperti di template viomagz ada 2 kode tersebut. Intinya cuma coba satu persatu cantumkan setelah kode tersebut.
Apabila kamu masih bingung silahkan cantumkan ke tata letak > side bar > tambahkan gadget > HTML / Javascript.
<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'>
Traktir disini untuk beli kopi kapal api.
</div>
</div>Silahkan sesuaikan sendiri yang link id kamu.
Dengan menggunakan widget tersebut akan memberikan sedikit kontribusi untuk menghasilkan di dunia blogger. Selain itu, akan lebih semangat dalam membuat konten artikel.
Demikian cara membuat kotak donasi keren di blogspot, semoga dapat membantu.
Posting Komentar