×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara membuat pop up donasi pada blog

Faronesia.com - Hai sobat blogger, ketemu lagi dengan faronesia. Pada kesempatan yang lalu banyak sekali pengguna blogger yang request kepada saya melalui whatsapp. Bukannya saya tidak peduli atau tidak menanggapi request tutorial dari anda semua namun saya sudah menyipakan halaman requestnya pada blog faronesia.com. Silahkan gunakan halaman tersebut dengan semestinya dan tidak merequest tutorial melalui chat whatsapp lagi karena hal ini sangat mengganggu saya pribadi dengan adanya chat dari kontak baru yang masuk.

Sebelum melanjutkan tutorial membuat popup donasi pada blog, anda harus mengetahui dan mengerti tentang popup itu sendiri. Mungkin bagi beberapa blogger sudah tahu akan hal ini. Namun, jika anda seorang blogger pemula atau baru saja terjun ke dunia blogger maka wajib mengetahui tentang apa itu popup.

Pop up

Pop up adalah area tampilan antarmuka pengguna grafis (GUI), yang biasanya berupa jendela kecil, yang akan muncul secara tiba-tiba di latar depan antarmuka visual saat kita melakukan sesuatu, seperti memilih tombol atau masuk ke halaman tertentu.

Laman Donasi

Laman donasi adalah sebuah halaman yang memuat informasi dan bertujuan memberikan kesempatan bagi orang lain untuk berdonasi kepada kita sebagai pemilik website. Fungsi terpenting dari Laman donasi bagi banyak organisasi nirlaba adalah mendorong orang untuk menyumbangkan uang.

Artinya, pada tutorial kali ini saya akan memandu anda membuat jendela pop up antarmuka yang memuat informasi dan bertujuan memberikan kesempatan bagi orang lain untuk berdonasi kepada website yang anda kelola sebagai bentuk apresiasi.

Source code yang saya bagikan ini adalah hasil dari inspeksi elemen saya sendiri dari sebuah blog milik orang lain. Perlu diingat, saya tidak serta - merta mengambil secara mentah lalu dibagikan kepada anda. Namun, saya memodifikasi kembali kode hasil inspeksi tersebut dan memperbaiki sedikit agar kode tersebut berjalan dengan baik saat anda ingin menggunakannya.
Tutorial membuat pop up donasi pada blog ini telah saya coba sebelum saya bagikan kepada anda. Dan hasilnya bekerja pada template Viomagz v.2.6, template Viomagz v.2.7, template Viomagz v.3.1, template Linkmagz v.1.3.0, dan template Linkmagz v.1.4.0. Untuk template selain yang saya sebutkan diatas silahkan coba - coba sendiri sekaligus mengasah kemampuan coding anda.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara membuat pop up donasi pada blog

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML Cari kode ]]></b:skin> 
  • lalu tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
/* Pop-up donasi by faronesia */
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
}.donasi-faronesia3{
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;
}
.donasi-faronesia1{
margin-bottom:15px;
font-weight:600;
}
.donasi-faronesia.aktif,.donasi-faronesia3.aktif{
visibility:visible;
opacity:1
}
.donasi-faronesia.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:Roboto;
font-size:18px;
color:#ccc;
transition:all .3s;
}
.icx:hover{
transform:rotate(360deg);
}
.icx:hover:before{
color:#222;
}
.donasi-faronesia,.donasi-faronesia3{
visibility:hidden;
opacity:0
}
.donasi-faronesia{
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: 3px 3px 3px rgba(0 , 0 , 0 , 0.12) , 0 3px 3px 3px rgba(0 , 0 , 0 , 0.12);
transition:all .5s;
}
.donasi-faronesia button{
border:none;
position:absolute;
margin-top:17px;
right:30px;
cursor:pointer;
background:#e8e8e8;
padding-left:7px;
outline:0;
}
.donasi-faronesia2{
font-size:14px;
}
#teks-donasi i{
background:#4090f1;
color:#fff;
margin:2px 0;
border-radius:20px;
width:22px;
height:22px;
line-height:20px;
text-align:center;
}
#faronesiamenu.aktif, #header-container.aktif,#wrapper.aktif{
-webkit-filter:blur(4px);
}
@media screen and (max-width:768px){
.donasi-faronesia{
left:10%;
right:10%;
}
}
  • Selanjutnya silahkan cari kode </body>
  • Lalu tambahkan kode HTML dibawah ini tepat diatas kode </body>
<div class='donasi-faronesia'>
<div class='donasi-faronesia1'>Donasi ke faronesia.com</div>
<div class='donasi-faronesia2'>
<div>
<span id='teks-donasi'><p>Hallo sobat Faronesia, Anda dapat memberikan suport kepada kami dengan cara memberikan donasi.</p>
<b><svg style='width:15px;height:15px' viewBox='0 0 24 24'><path d='M2,3H22C23.05,3 24,3.95 24,5V19C24,20.05 23.05,21 22,21H2C0.95,21 0,20.05 0,19V5C0,3.95 0.95,3 2,3M14,6V7H22V6H14M14,8V9H21.5L22,9V8H14M14,10V11H21V10H14M8,13.91C6,13.91 2,15 2,17V18H14V17C14,15 10,13.91 8,13.91M8,6A3,3 0 0,0 5,9A3,3 0 0,0 8,12A3,3 0 0,0 11,9A3,3 0 0,0 8,6Z' fill='#000000'/></svg> NAMA</b> : Hazira Azza Faroni<br/>
<b><svg style='width:15px;height:15px' viewBox='0 0 24 24'><path d='M11.5,1L2,6V8H21V6M16,10V17H19V10M2,22H21V19H2M10,10V17H13V10M4,10V17H7V10H4Z' fill='#000000'/></svg> BANK BRI</b> : 6642-01-030178-53-6<br/>
<b><svg style='width:15px;height:15px' 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 TSL</b> : 081229706872<br/>
</span>
</div>
</div>
<a class='waves-light close-sf' href='javascript:;' title='Done'>Selesai</a>
<a class='icx close-sf' href='javascript:;'/></div
><div class='donasi-faronesia3'/>
  • Dan tempelkan pula kode JAVASCRIPT dibawah ini tepat diatas kode </body>
<script type='text/javascript'> $(document).ready(function(){$(&quot;.close-sf&quot;).click(function(){$(&quot;.donasi-faronesia,.donasi-faronesia3,#header-container,#wrapper&quot;).removeClass(&quot;aktif&quot;)})}),$(document).ready(function(){$(&quot;.money&quot;).click(function(){$(&quot;.donasi-faronesia,.donasi-faronesia3,#header-container,#wrapper&quot;).toggleClass(&quot;aktif&quot;)})});
  </script>
  • Selanjutnya anda cukup membuat buttonnya dan tempatkan pada menu blog
  • Silahkan tempelkan kode dibawah ini pada menu blog anda
<li><a class='money' href='javascript:void(0)' rel='nofollow noopener' title='Donasi'>Donasi</a></li>
  • Terakhir, silahkan simpan template yang sudah anda modifikasi dan lihat hasilnya

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara membuat pop up donasi pada blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup