Tutorial Lengkap Cara Membuat Tombol Donasi Melayang (Sticky) di Samping Blog dengan Mudah

Juni 15, 2026

Jika kamu memiliki sebuah blog, dan pengunjung dari blog kamu tidak sedikit, alias membludak setiap harinya, apalagi sumber uang yang kamu dapat hanya dari merch yang kamu tawarkan pada blog tersebut, nah tentunya kamu bisa memberikan kotak tombol donasi, tentu itu akan sangat berguna sekali bagi kamu semua yang ingin memasang tombol donasi pada blog milikmu agar para pembaca setia pada blogmu bisa melakukan donasi setiap hari.

Tujuan tombol donasi dipasang pada blog ialah, agar pengunjung yang memang merasakan manfaat yang kamu berikan pada artikel milikmu bisa berdonasi dan mendukung blog yang kamu kembangkan, tentunya dengan adanya tombol donasi, pengunjung setiamu kemungkinan akan memberikan donasi kepada kamu sebagai hasil dari timbal balik konten artikel yang berkualitas.

Nah akan tetapi jika kamu menempatkannya pada sidebar blog ataupun di post-body, tentunya itu sangat amat ribet sekali bukan? kamu ingin disetiap aspek blog akan terlihat kotak tombol donasi itu bukan?

Nah dibawah ini aku sudah mempersiapkan sebuah tutorial bagaimana caranya untuk memasang kotak tombol donasi saweria, trakteer, buymeacoffee bahkan paypal melayang disamping kanan pada blog milikmu, nah bagaimanakah tutorialnya? langsung saja ikuti tutorialnya kali ini.

Tutorial :

Pertama-tama pastikan kamu telah login pada blog milikmu.
Disini pada halaman utama blog, bukalah menu "Tema", lalu click tombol segitiga mengarah kebawah disamping tombol "Sesuaikan" warna orange tersebut. jika sudah maka akan muncul sebuah menu, disini pilih "Edit HTML"
Nah jika sudah dihalaman mode edit html ini, disini carilah code /* Footer Wrapper */ (biasanya jika itu template dari mba arlina/mba igniel itu pasti ada) jika kamu memakai template bawaan maka sisipkan saja pada code ]]></b:skin>
Nah jika sudah ketemu maka copy seluruh code dibawah ini lalu pastekan tepat diatas code /* Footer Wrapper */ tersebut atau jika tidak ada code itu, maka pastekan diatas code ]]></b:skin> atau jika masih tidak bisa juga, maka pastekan dibawah code <style>

Khusus bagi kamu yang memiliki template diluar web desain mba arlina, misalnya desain template yang dimiliki mas sugeng ataupun mba igniel atau bungfrangki dan lainnya, pastekan code dibawah ini tepat diatas code <head>, jangan lupa tambahkan tag pembuka <style> lalu tag penutup </style> diawal code dan diakhir code css dibawah ini :

/*Tombol Donasiku*/
.fixed-donation{position:fixed;bottom:75px;right:15px;width:50px;height:50px;z-index:9999}
.fixed-donation:before{content:&quot;&quot;;background-repeat:no-repeat;background-size:34px 34px;background-position:center center;width:50px;height:50px;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqh12OFOrn--p3k6tT9TF7tW6I_4zwb3OFXUucN1s_BTvhiiGoEyJsRRer6R_yFln7291boTkFOBOLAZv_mmBBpi9DCluWqY1-bzRyO8GVC42y8DZ9Hen5XwL67NHCMQi4YoF8wah5pnwyEN3deCwglH7vioanoxBtJpB4yw6jjWbmEQ21eKmDlSFoQ/s1600/rrwe.png&#39;);background-color:#ffa401;position:absolute;top:0;left:0;border-radius:100%;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);cursor: pointer;}
.fixed-donation:after{content:&quot;Donasi disini&quot;;width:105px;padding:5px 5px;position:absolute;bottom:100%;margin-bottom:-45px;left:100%;margin-left:-180px;right:10px;text-align:left;color:#fff;border:5px solid #ffa401;background:rgba(255,164,1,1);border-radius:3px;opacity:0;font-size:90%;line-height:1.1}
.fixed-donation:after{opacity:1;right:0}
/* CSS popup*/
#popup-wrap .popup-button:hover { background-color: #5555CC; }/* background-color bisa diganti dengan warna lain*/
#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0;  background:#df9209; transition: opacity .25s ease; z-index: 999999; }/* background bisa diganti putih (#fff) supaya transparan atau warna lain yang disukai*/
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }
#popup-wrap .popup-form { transition: top .25s ease; position: relative; top: -20%; right: 0; bottom: 0; left: 0; max-width: 500px; margin: auto; overflow:none; padding: 2.5em; max-height: 600px; background: #ffa401; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: &quot;Century Gothic&quot;, sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: &quot;Century Gothic&quot;,sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #df9209; }
#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: &#39;&#39;; position: absolute; width: 5px; height: 1.5em; background: #ed9c0a; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #df9209; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }
@media screen and (max-width:768px){
#popup-wrap .popup-form {max-width:400px;max-height;700px;}
#popup-wrap .popup-form-close:after {background:#fff;}
#popup-wrap .popup-form-close:before {background:#fff;}
#popup-wrap .popup-form-close:hover:before {background:#000;}
}

Nah jika sudah selesai mempastekannya, sekarang carilah code </body>

Nah disini copy seluruh code dibawah ini lalu pastekan tepat diatas code body nya :

<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class='fixed-donation' for='popup-trigger' title='Tap icon coin ini untuk donasi'/>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>Pilih tempat donasi kesukaan kamu dibawah ini</span>
                    <span class='popup-content'>saweria/trakteer ga harus login buat lakuin proses donasi loh</span>
                  <center>
                  <table>
                    <tr>
                    
                  <br/>
                  <td><a height='50px' href='https://saweria.co/Putuokane' rel='nofollow' target='_blank' width='100px'><img alt='Deskripsi Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBVaHyRQqjjzVUX2yeIkP84ABm2gjKh-M_a1j_i_EVtR18FBJbbRg_mB-MqZaXhRONJZ73_yc4ozLT1uL6FW0Y5Gx7o_l5hvwWXLyF_4797EkzAnz41-5kylbz2MEe-oIX2x4d6T5HOj9pCCPBXBEQw2moOH6_7pRXAe0XazJfaLjbvxgtnh8U-tZL0w/s1600/Saweria.png' title='Gaperlu lagi donasi pake login dulu di saweria'/></a></td>
                  <br/>
                  <td><a height='50px' href='https://trakteer.id/tuoka20' rel='nofollow' target='_blank' width='100px'><img alt='Deskripsi Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXUcIPwP0v5lbPKXpEMYLV0tCjqVWTjWeEOTqte9v2SHHSBbhmpyNAZFEG3KwSklt6BkPtIdn9uOv7Qxoaz8X4X_j6mvczmG7reyxx_TjWIIgy0BEiGUpcTI2d3qFZrGVmx9_v6BfS6Cxsc2XHskGaMrHedT33MeVHam4iCFFcCt9modHNqKAqP9MQw/s1600/Trakteer.png' title='Yuk bisa yuk donasi via trakteer'/></a></td>
                  <br/>
                      <td><a height='50px' href='https://buymeacoffee.com/tuoka20' rel='nofollow' target='_blank' width='100px'><img alt='Deskripsi Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUWgbPb8Mv393DSU96PyPu6YEk6yUaOprPywkXNKdNguSX9ibzbvQeAK2w9_aE-GVbJBuqHhTEcNUGwy3EWUDWmGEpg15orH5y2U4TxBCUxRPwKmSuCnJHSQFL-602QRaDBtqzNayLuAu-GvnZF3YBNDHnLIw-gfTNPZbUTzzVviL4w65MMpWz7KlCQ/s1600/Buymeacoffee.png' title='Donate here if you want to buy me a coffee for $5'/></a></td>
                  <br/>
            <td><a height='50px' href='https://paypal.me/tuoka20' rel='nofollow' target='_blank' width='100px'><img alt='Deskripsi Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQqu-YiN9wJcd1xoxSLVl-j-v_xFftNhTqUcVFmDPQ44SNnmCa0CVJF5y5fCgKviF3P5YJFxu2T0VBlGBRHUeiAiLxKjkwk-n80V1__O6RYyB5SR8L7DsfY-ukCnA1RciWYsS3NmHjHE8Jso8cIR_MEyO18R9qJVUvIknDNvYxv5m_OBQPtQ9UqGnF8A/s1600/Paypal.png' title='you are paypal lovers? just donate here'/></a></td>
                  <br/>
                    </tr>
                    </table>
                    <br/>
                    <span class='popup-footer'>Terimakasih banyak bagi kamu yang udah meluangkan waktu untuk donasi di website ini. rencananya donasi yang sudah terkumpul
                      akan aku gunakan untuk membeli sebuah peralatan yang lebih mumpuni agar dapat menunjang aktivitas coding dan riset artikel lebih jauh.</span>  
                  </center>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

Disini masukan link saweria/trakteer/buymeacofee maupun paypal milikmu.
Nah jika sudah maka sekarang click tombol "Simpan", nah tombol simpan tersebut berbentuk seperti disket yang aku tandai pada gambar dibawah ini.
Disini tunggu beberapa detik hingga proses penyimpanan template yang sudah dimodifikasi selesai.
Jika berhasil maka selamat, kamu sekarang dapat mengetest/mencobanya, jika masih belum kemungkinan template yang kamu gunakan tidak mendukung untuk ini, kecuali kamu menggunakan template yang kamu beli/download dari mba arlina, seluruh templatenya 100% compatible, tidak diragukan lagi.

Penutup

Baik, mungkin itu saja tutorial yang dapat dibagikan kali ini, dengan mengikuti langkah-langkah di atas, diharapkan kamu sudah berhasil menambahkan tombol donasi melayang di blog milikmu.

Fitur ini tentu sangat berguna untuk memberikan kemudahan bagi pengunjung yang ingin mendukung blogmu melalui donasi, selain itu, tampilannya yang melayang juga membuatnya lebih praktis dan mudah diakses tanpa mengganggu konten utama.

Jika masih mengalami kendala, kemungkinan template yang digunakan belum sepenuhnya mendukung fitur ini, namun, pada beberapa template populer seperti buatan Arlina, Igniel, atau Sugeng, fitur ini umumnya dapat berjalan dengan baik.

Semoga tutorial ini bermanfaat dan dapat membantu mengembangkan blogmu menjadi lebih maksimal. Selamat mencoba!

P. Oka .M Juni 15, 2026

Tutorial Lengkap Cara Membuat Tombol Donasi Melayang (Sticky) di Samping Blog dengan Mudah