Cara Membuat Widget Donasi Popup Di Blog Terbaru

Cara membuat widget donasi popup (melayang) di blog akan saya bagikan pada panduan kali ini untuk kalian semua secara gratis tentunya.

Widget donasi popup adalah container yang tampil popup (melayang) ketika kita mengklik tombol donasi, dan konten didalam containernya adalah cara untuk berdonasi kepada kalian.

Contohnya seperti berdonasi dengan Paypal, Dana, Pulsa, dan Transfer bank.

Apakah kalian masing bingung seperi apa tampilan widget donasi popup tersebut?, untuk demonya kalian bisa cek blog www.panduancode.com.

Pertama buka blog www.panduancode.com, lalu cari menu navigasi tools, kemudian didalamnya terdapat 4 tombol dan tombol yang ketiga adalah tombol donasi popup.

Dan ketika tombol donasi tersebut diklik maka akan muncul widget donasi popup seperti pada gambar dibawah ini.

Bagaimana kerenkan widget donasi popup di blognya?, selain keren widget donasi tersebut juga responsive untuk semua perangkat baik itu komputer, smartphone, maupun tablet.

Penasaran bagaimana cara membuatnya?, yuk simak panduan membuat widget donasi popup dibawah ini.

Cara Membuat Widget Donasi Popup Di Blog

1. Buka Edit HTML template kalian, dan cari kode </style>.

2. Jika sudah ketemu kode tersebut, copy kode CSS dibawah ini untuk mengatur tampilan widget donasi popup tersebut.


.money{display:-webkit-inline-box}.donasipanduan,.donasipanduan3{visibility:hidden;opacity:0}.donasipanduan{background:#fff;position:fixed;padding:25px;top:20%;transform:scale(1.2);max-width:450px;margin:auto;left:0;right:0;z-index:100;border-radius:4px;box-shadow:0 10px 3rem -1rem rgba(0,0,0,.5);transition:all .5s}.donasipanduan button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}a.waves-light.close-sf{background:#4090f1;color:#fff;margin-top:15px;display:inline-block;padding:6px 13px;border-radius:3px;float:right;font-size:14px}a.waves-light.close-sf:hover{background:#00b140;color:#fff}.donasipanduan3{position:fixed;top:0;background:rgba(255,255,255,.39);left:0;right:0;bottom:0;margin:0;z-index:99;transition:all .4s ease-in-out}.donasipanduan1{margin-bottom:15px;font-weight:600}.donasipanduan.aktif,.donasipanduan3.aktif{visibility:visible;opacity:1}.donasipanduan.aktif{transform:scale(1);z-index:9999}.icx{position:absolute;top:10px;right:15px;transform:rotate(180deg);transition:all .3s}.icx:before{content:&#39;&#39;;font-family:Arial;font-size:18px;color:#ccc;transition:all .3s}.icx:hover{transform:rotate(360deg)}.icx:hover:before{color:#222}.donasipanduan2{font-size:14px}#cssmenu.aktif,#header-container.aktif,#wrapper.aktif{-webkit-filter:blur(4px)}@media screen and (max-width:768px){.donasipanduan{left:10%;right:10%}}#teks-donasi i{background:#4090f1;color:#fff;margin:2px 0;border-radius:20px;width:22px;height:22px;line-height:20px;text-align:center}

Kemudian paste kode CSS tersebut tepat diatas kode </style>, didalam template blogger pasti ada lebih dari satu kode </style>, nah kalian bisa memilih yang mana saja, tapi pada biasanya pilih kode </style> yang pertama.

Kenapa disarankan kode </style> yang pertama?

Alasannya karena kode </style> yang pertama adalah penutup kode CSS untuk semua tampilan blog.

Jadi nanti widget donasi popupnya tidak akan tampil hanya dihalaman tertentu blog, namun akan tampil disemua halaman blog.

3. Cari kode </body> pada template blogger kalian, jika sudah ketemu copy script widget donasi popup dibawah ini.


<div class='donasipanduan'>
<div class='donasipanduan1'>Donasi</div>
<div class='donasipanduan2'>
<div><span id='teks-donasi'>Hallo sobat panduan code, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi, yang mana nantinya donasi tersebut akan digunakan untuk memperpanjang Domain Panduan code.
<br/><br/><b><svg class='iconmenu' viewBox='0 0 24 24'>
<path d='M21 9V6H7V9H21M21 3A2 2 0 0 1 23 5V15A2 2 0 0 1 21 17H7A2 2 0 0 1 5 15V5A2 2 0 0 1 7 3H21M3 19H18V21H3A2 2 0 0 1 1 19V8H3Z' fill='#000000'/></svg>
 BANK BRI</b>:401101013389533 a/n ARIF NOERWAHIDIN<br/>
 <b><svg class='iconmenu' viewBox='0 0 24 24'>
 <path d='M22,3H2A2,2 0 0,0 0,5V19A2,2 0 0,0 2,21H22A2,2 0 0,0 24,19V5A2,2 0 0,0 22,3M8,6A3,3 0 0,1 11,9A3,3 0 0,1 8,12A3,3 0 0,1 5,9A3,3 0 0,1 8,6M14,18H2V17C2,15 6,13.9 8,13.9C10,13.9 14,15 14,17V18M17.85,14H19.5L21,16L19,18C17.7,17 16.73,15.61 16.28,14C16.1,13.36 16,12.69 16,12C16,11.31 16.1,10.64 16.28,10C16.73,8.38 17.7,7 19,6L21,8L19.5,10H17.85C17.63,10.63 17.5,11.3 17.5,12C17.5,12.7 17.63,13.37 17.85,14Z' fill='#000000'/></svg>
  PULSA</b> : 082126546564<br/>
  <b><svg class='iconmenu' viewBox='0 0 24 24'>
  <path d='M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z' fill='#000000'/></svg>
   PAYPAL</b> : <a href='https://www.paypal.me/panduancode' rel='noopener' title='Donasi Panduan Code'>Panduan Code</a></span></div></div>
   <a class='waves-light close-sf' href='javascript:;' title='Done'>Done</a>
   <a class='icx close-sf' href='javascript:;'/></div>
   <div class='donasipanduan3'/>
   <script> $(document).ready(function(){$(&quot;.close-sf&quot;).click(function(){$(&quot;.donasipanduan,.donasipanduan3,#header-container,#wrapper&quot;).removeClass(&quot;aktif&quot;)})}),$(document).ready(function(){$(&quot;.money&quot;).click(function(){$(&quot;.donasipanduan,.donasipanduan3,#header-container,#wrapper&quot;).toggleClass(&quot;aktif&quot;)})});
</script>

Kemudian paste script widget donasi popup diblog tersebut tepat diatas kode </body>.

4. Edit script widget donasi popup diblog tersebut agar sesuai dengan blog kalian.

Pertama ubah teks donasinya menjadi seunik mungkin dengan blog kalian.

Kedua ubah bank, nomor rekening, dan a/n (atas nama)nya menjadi nama pemilik rekeningnya.

Ketiga ubah nomor HP-nya menjadi no HP kalian.

Keempat ubah link Paypal-nya menjadi link Paypal kalian dan jangan lupa ubah achor teksnya.

5. Cari bagian menu navigasi pada template blogger kalian, lalu copy kode tombol untuk menampilkan widget donasi popup dibawah ini.


<li><span class='money'><svg class='iconsocial' viewBox='0 0 24 24'><path d='M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z' fill='#000000'/></svg>Donasi</span></li>

Lalu paste kode tersebut dibagian menu navigasi template blogger kalian, setelah itu save template.

6. Coba akses blog kalian dan uji tombol widget donasi popup tersebut, jika tidak tampil berarti kalian salah menempatkan kode CSS-nya, dan coba simpan kode CSS-nya diatas kode </style> yang lain.

Sampai disini kalian sudah selesai membuat widget donasi popup diblog terbaru, semoga panduan ini bermanfaat untuk kalian.

Jika ada pertanyaan mengenai panduan pada artikel ini jangan ragu untuk menghubungi admin, terima kasih.