Tutorial Cara Membuat Tombol Donasi Melayang (Sticky) Disamping Blog
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:"";background-repeat:no-repeat;background-size:34px 34px;background-position:center center;width:50px;height:50px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqh12OFOrn--p3k6tT9TF7tW6I_4zwb3OFXUucN1s_BTvhiiGoEyJsRRer6R_yFln7291boTkFOBOLAZv_mmBBpi9DCluWqY1-bzRyO8GVC42y8DZ9Hen5XwL67NHCMQi4YoF8wah5pnwyEN3deCwglH7vioanoxBtJpB4yw6jjWbmEQ21eKmDlSFoQ/s1600/rrwe.png');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:"Donasi disini";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: "Century Gothic", 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: "Century Gothic",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: ''; 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.
Nah mungkin segitu saja tutorial dari aku. oh iya bagi kamu yang masih penasaran. bagaimana system kerjanya? kamu bisa melihatnya dengan mengeclick tulisan "Demo" dibawah ini.
