Pernahkah agan mengunjungi website dengan ada pop up? Bukan, bukan yang klik lalu muncul pop up XD tapi waktu mau keluar web ada pop up otomatis muncul, uwih. Nah jika agan perhatikan saya juga pasang :v Gimana caranya?
Pop up muncul saat keluar web ini saya sebut saja Smart PopUp jika memang ada namanya komen gan. PopUp ini sangat berguna, selain tidak mengganggu pembaca setia kita juga pintar memilih pengunjung yang berpotensi berinteraksi dengan popup ini.
Prinsip pop up ini sendiri cukup sederhana pop up akan terun melacak pergerakan mouse (cursor), bila mouse pergi maka pop up akan muncul. Kita nanti menggunakan script dari agan
@beeker1121
Sebelum pop up mendeteksi cursor akan di jeda dahulu misal tunggu 10 detik atau 30 detik. Nah ini membuat target pop up kita ke pengunjung lebih akurat, apakah itu pengunjung hanya lewat atau memang pembaca artikel.
Ok langsung saja!
Memasang Script
1. Pertama kita masuk ke admin lalu tambah external javascript ini, di atas </body>
<![CDATA[
<script src="https://rawgit.com/beeker1121/exit-intent-popup/master/js/bioep.js" type="text/javascript"></script>
<script type="text/javascript">
bioEp.init({
cookieExp: 0,
delay: 10
});
</script>
]]>
2. Lalu tambahkan code htmlnya di bawah tag <body>
<![CDATA[
<div id="bio_ep">
<div id="bio_ep_content">
<!-- your image here -->
<img alt="Grow" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_BRLL7bH1HYrhQA-sHd4jiF0RRpQsBkL_SQDADBgVRNr5F4EqBSb619LItBQAjrxnAXotoSRY6HKEZFrJbnGJHl73As4_PVCMxarqPAoxYg52KJhHVVXE_GaCucVGuSXJwQO6OXhCikJ/s1600-rw/grow-new.png" width="100%" />
<!-- title and text -->
<span class="title-popup">HELP US GROW!</span>
<span class="des-popup">Terima kasih gaes telah mampir<br> Bantu kami tumbuh dengan like dan subscribe berikut</span><br />
<!-- form subscribe here -->
<form action="#" method="POST">
<input type="email" autocapitalize="off" autocorrect="off" size="25" value="" placeholder="Email Anda" />
<div><input type="submit" class="formEmailButton bio_btn" name="submit" value="SUBSCRIBE" /></div>
</form>
<!-- social media button -->
<div id="social-popup">
<a href="#"><span class="sp-btn" id="fb-popup"><span class="fa fa-facebook"></span> Facebook</span></a>
<a href="#"><span class="sp-btn" id="gp-popup"><span class="fa fa-google-plus"></span> Google+</span></a>
<a href="#"><span class="sp-btn" id="ig-popup"><span class="fa fa-instagram"></span> Instagram</span></a>
</div>
</div>
</div>
]]>
3. Tambahkan CSS berikut
<![CDATA[
#bio_ep {
width: 550px;
height: auto;
color: #333;
background-color: #fff;
text-align: center;
border-radius: 15px;
overflow:hidden;
box-shadow: 0px 0px 20px #0000006b;
}
#bio_ep_content {
padding-bottom: 23px;
}
#bio_ep_content img{
padding-top: 0px;
box-shadow: 0px 0px 10px #0000006b;
}
.title-popup {
font-family: Carter One;
font-size: 30px;
font-weight: 600;
display:block;
padding: 15px 0;
}
.des-popup {
display: inline-block;
width: 70%;
font-size: 14px;
color: #676767;
line-height: 21px;
}
#bio_ep_content form {
padding-top: 25px;
}
#bio_ep_content form input{
font-size: 16px;
padding: 7px 17px;
border: 1px solid #a4a4a4;
border-radius: 30px !important;
}
#bio_ep_content form input:active {
border: 1px solid #80C56E !important;
}
#bio_ep_content form input:focus {
outline: none;
}
#bio_ep_close {
margin: 5px 0 0 -46px;
width: 41px;
height: 28px;
padding: 7px 0;
background-color: #fff;
color: #5c5c5c;
border-radius: 100%;
font-size: 22px;
font-family: calibri;
}
#bio_ep_close:hover {
background-color: #ececec;
}
.bio_btn {
display: inline-block;
font-size: 14px !important;
margin: 18px 0;
padding: 7px;
color: #fff;
font-size: 14px;
font-weight: 600;
background-color: #80C56E;
border: 1px solid #80C56E !important;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 30px;
text-decoration: none;
box-shadow: 1px 1px 4px #0000006b;
}
#social-popup {
padding-bottom: 14px;
font-size: 12px;
}
#social-popup a {
text-decoration: none;
color: white;
margin: 0 5px;
}
.sp-btn{
padding: 5px 10px;
border-radius: 4px;
}
#fb-popup{
background: #39569B;
}
#gp-popup{
background: #DA4835;
}
#ig-popup{
background: #251F21;
}
]]>
4. Selesai,
Edit
Script selesai dipasang, sekarang waktunya kita edit
Edit Gambar
1. Cari kode ini
<![CDATA[
<!-- your image here -->
<img alt="Grow" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_BRLL7bH1HYrhQA-sHd4jiF0RRpQsBkL_SQDADBgVRNr5F4EqBSb619LItBQAjrxnAXotoSRY6HKEZFrJbnGJHl73As4_PVCMxarqPAoxYg52KJhHVVXE_GaCucVGuSXJwQO6OXhCikJ/s1600-rw/grow-new.png" width="100%" />
]]>
2. Ubah link bagian https://blablabla ke gambar yang diinginkan
Recommended: Usahakan lebar gambar berukuran 550px
Judul dan Deskripsi
1. Cari kode ini
<![CDATA[
<!-- title and text -->
<span class="title-popup">HELP US GROW!</span>
<span class="des-popup">Terima kasih gaes telah mampir<br> Bantu kami tumbuh dengan like dan subscribe berikut</span><br />
]]>
2. Ubah judul dan deskripsi sesuai keinginan
Email
1. Cari kode ini
<![CDATA[
<!-- form subscribe here -->
<form action="#" method="POST">
<input type="email" autocapitalize="off" autocorrect="off" size="25" value="" placeholder="Email Anda" />
<div><input type="submit" class="formEmailButton bio_btn" name="submit" value="SUBSCRIBE" /></div>
</form>
]]>
2. Ubah form sesuai code form berlangganan agan
Tombol Sosmed
1. Cari kode ini
<![CDATA[
<div id="social-popup">
<a href="#"><span class="sp-btn" id="fb-popup"><span class="fa fa-facebook"></span> Facebook</span></a>
<a href="#"><span class="sp-btn" id="gp-popup"><span class="fa fa-google-plus"></span> Google+</span></a>
<a href="#"><span class="sp-btn" id="ig-popup"><span class="fa fa-instagram"></span> Instagram</span></a>
</div>
]]>
2. Ubah # sesuai link masing-masing sosmed agan
Selesai :D monggo dicoba. Bila masih bingung keseluruhan coding bisa lihat dibawah
Opsi
Tadi dijelaskan Pop up ada waktu jeda 10 detik atau 30 detik. Cara mengedit atau menambah ada di jsnya
1. Cari kode ini di javasscript
<![CDATA[
bioEp.init({
cookieExp: 0,
delay: 5
});
]]>
2. Edit code ini untuk durasi jeda
<![CDATA[
delay: 5
]]>
3. Tambahkan opsi lain yang diinginkan, tulis sesuai format
| Name |
Type |
Default |
Description |
| delay |
integer |
5 |
Waktu jeda popup mendeteksi mouse saat halaman diakses. Jika melebihi maka popup baru bekerja. Jika showOnDelay aktif, waktu ini digunakan untuk jeda popup sebelum muncul otomatis |
| showOnDelay |
boolean |
false |
Jika true maka popup otomatis muncul saat waktu delay habis. Jika false popup muncul dengan metode mendeteksi mouse |
| cookieExp |
integer |
30 |
Jumlah hari kadaluarsa untuk cookie. Cookie digunakan untuk mendeteksi apakah popup telah muncul pada pengunjung sebelumnya. Popup baru muncul kembali ke pengunjung yang sama jika cookie melewati hari kadaluarsa. Set 0 agar popup selalu muncul. |
| showOncePerSession |
boolean |
false |
Jika ya, popup akan muncul hanya sekali per satu sesi kunjungan ke blog. Jika false (tidak) dan cookieExp diset 0 popup akan selalu muncul disemua halaman walaupun di satu sesi kunjungan. |
| onPopup |
function |
null |
Memanggil sebuah fungsi untuk dijalankan saat setelah popup muncul |
Kesimpulan
Yap Smart PopUp ini akan muncul sebelum pengunjung menutup halaman kita. Sangat cocok bila kita sisipkan promo atau konten menarik untuk pengunjung. Ok gaes sekian posting kali ini mengenai PopUp pintar ini. Bila ada kesalahan atau pertanyaan langsung komen.
Semoga Bermanfaat
Share This :
Reaksi dan Komentar