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:'';
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(){$(".close-sf").click(function(){$(".donasi-faronesia,.donasi-faronesia3,#header-container,#wrapper").removeClass("aktif")})}),$(document).ready(function(){$(".money").click(function(){$(".donasi-faronesia,.donasi-faronesia3,#header-container,#wrapper").toggleClass("aktif")})});
</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.