Cara Membuat Widget Donasi Melayang di Blogger

Daftar Isi

Membuat widget floating donate di blogger hanya dengan menggunakan css dan html, jadi cukup ringan. Menggunakan widget donasi mungkin sebagai opsi mengumpulkan dana selain adsense blog.

Manfaat menggunakan widget donasi ini yaitu memberikan dukungan dan kontribusi ke penulis. Dengan tombol yang melayang ini, akan lebih meningkatkan tingkat klik tombol tersebut.

Sebelum membuat widget ini kamu harus mempunyai akun penyedia donasi seperti :

1. Saweria.co
2. Trakteer.id
3. Buymeacoffee.com
4. SociaBuzz.com

Silahkan pilih salah satu, penyedia mana yang akan kamu buat.

Kelebihan membuat widget donasi melayang ini yaitu tingkat klik link untuk memberikan berkontribusi lebih tinggi dibandingkan dengan widget yang ditaruh pada bagian halaman.

Demo contohnya widget ini sebagai berikut.

Cara Membuat Widget Donasi Melayang

Widget floating Donate ini hanya menggunakan kode css dan html yang cukup ringan.

Manfaat utama dari widget donasi adalah meningkatkan pendapatan bagi seorang blogger. Dengan adanya fitur ini, para pengunjung akan lebih termotivasi untuk memberikan dukungan finansial kepada blogger yang mereka sukai.

Berikut adalah cara membuat widget donasi melayang di blogger :

Salin kode css di bawah ini dan tempelkan diatas kode </style>.

:root{
--background:#a50000;
--backgroundHover:#f0f0f0;
--color:#fff;
--colorHover:#2f2f2f}
.animasi-d{animation-name:wave-animation;animation-duration:2.5s;animation-iteration-count:infinite;transform-origin:70% 70%;display:inline-block}
@keyframes wave-animation{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.donasi-t{position:fixed;bottom:20px;left:20px;z-index:1000;padding:12px;margin:0;border-radius:40px;text-alignt:center;font-size:small;font-weight:700}
.donasi-t img{width:20px;height:20px}
.donasi-t svg{width:20px;height:20px}
.donasi-t a{align-items:center;background-color:var(--background);border-radius:20px;color:var(--color);display:flex;gap:0.5rem;padding:0.5rem 1rem;text-decoration:none;transition:all .3s;box-shadow:0 5px 10px rgba(0,0,0,0.15)}
.donasi-t a:hover{background-color:var(--backgroundHover);color:var(--colorHover);text-decoration:none;box-shadow:0 5px 10px rgba(0,0,0,0.15)}

Selanjutnya, salin kode html berikut ini dan tempelkan diatas /body.

<div class="donasi-t"><a href='https://trakteer.id/user_id'
    rel='nofollow noopener' target='_blank' title='Donasi via Trakteer'><img
      class="animasi-d" alt="Dukung Saya" border="0" data-original-height="255"
      data-original-width="255" height="20px"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVacfq2sKZCt8u0SM5xEdvfbbOW-SHOg3G9XRlEPPhvMq_CLAb5dI0D6-exYOLzGTpmyUasD0jrLc8V9UpnCe0gutqftvcMBDBtVMKzSbtTJkHYuEKvmYDBiVWWJN6z-y7kjX9JxTXFjqAOS8a75VLv4PpeCTwBWGhejk-Rold3R894w4A-vRJb2sfzxpm/w20-h20/support-me.webp"
      title="Dukung Saya" width="20px" />Dukung Saya di Trakteer</a></div>

Silahkan ganti url tersebut ke penyedia layanan donate yang kamu inginkan.

Contoh tersebut saya menggunakan trakteer, apabila kamu ingin merubah url ke penyedia donasi yang lain.

Kamu dapat mengganti warna pada :root css sesuai yang kamu inginkan. Dan juga kamu dapat mengganti gambar tersebut ke icon svg.

Gunakan Lazyload Gambar

Agar lebih ringan gunakan lazyload untuk gambar. Berikut adalah kode html yang harus kamu gunakan.

<div class='donasi-t'><a href='https://trakteer.id/user_id'
    rel='nofollow noopener' target='_blank' title='Donasi via Trakteer'><img
      alt='Dukung Saya' border='0' class='lazy animasi-d'
      data-original-height='255' data-original-width='255'
      data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVacfq2sKZCt8u0SM5xEdvfbbOW-SHOg3G9XRlEPPhvMq_CLAb5dI0D6-exYOLzGTpmyUasD0jrLc8V9UpnCe0gutqftvcMBDBtVMKzSbtTJkHYuEKvmYDBiVWWJN6z-y7kjX9JxTXFjqAOS8a75VLv4PpeCTwBWGhejk-Rold3R894w4A-vRJb2sfzxpm/w20-h20/support-me.webp'
      height='20px'
      src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
      title='Dukung Saya' width='20px' />Dukung Saya di Trakteer</a></div>

Bagi template yang sudah terpasang script lazyload gambar silahkan sesuaikan tag class=lazy dengan masing-masing template.

Kemungkinan tiap template memiliki perbedaan tag pemanggil lazyload ini.

Apabila pada template kamu belum memasang script lazyload gambar kamu dapat membaca artikel ini.

Tutorialnya ada pada postingan :

• Cara Memasang Lazyload Gambar di Blogger

Jika kamu mengganti gambar ke icon svg, abaikan aja penggunaan lazyload gambar ini.

Cukup mudah bukan? membuat widget ini. Dengan menggunakan penyedia donasi adalah jalan alternative mendapatkan pundi-pundi selain adsense.

Perlu perhatikan pula gunakan aja satu widget donasi, kalo lebih dari itu kesannya seperti meminta-minta.

Penutup

Demikian tutorial mengenai cara membuat kotak donasi melayang dengan css dan html di blogger. Semoga postingan ini dapat bermanfaat.