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>
2. Lalu tambahkan code htmlnya di bawah tag <body>
<![CDATA[</p>
<div>
<div>
<!-- your image here --><br />
<img decoding="async" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_BRLL7bH1HYrhQA-sHd4jiF0RRpQsBkL_SQDADBgVRNr5F4EqBSb619LItBQAjrxnAXotoSRY6HKEZFrJbnGJHl73As4_PVCMxarqPAoxYg52KJhHVVXE_GaCucVGuSXJwQO6OXhCikJ/s1600/grow-new.png" width="100%" alt="Grow" /><br />
<!-- title and text --><br />
<span>HELP US GROW!</span><br />
<span>Terima kasih gaes telah mampir<br /> Bantu kami tumbuh dengan like dan subscribe berikut</span><br />
<!-- form subscribe here --></p>
<div></div>
<p> <!-- social media button --></p>
<div>
<a href="http://www.fishertekno.com/#"><span><span></span> Facebook</span></a><br />
<a href="http://www.fishertekno.com/#"><span><span></span> Google+</span></a><br />
<a href="http://www.fishertekno.com/#"><span><span></span> Instagram</span></a>
</div>
</p></div>
</div>
<p>]]>
3. Tambahkan CSS berikut
<![CDATA[<br />
#bio_ep {<br />
width: 550px;<br />
height: auto;<br />
color: #333;<br />
background-color: #fff;<br />
text-align: center;<br />
border-radius: 15px;<br />
overflow:hidden;<br />
box-shadow: 0px 0px 20px #0000006b;<br />
}<br />
#bio_ep_content {<br />
padding-bottom: 23px;<br />
}<br />
#bio_ep_content img{<br />
padding-top: 0px;<br />
box-shadow: 0px 0px 10px #0000006b;<br />
}<br />
.title-popup {<br />
font-family: Carter One;<br />
font-size: 30px;<br />
font-weight: 600;<br />
display:block;<br />
padding: 15px 0;<br />
}<br />
.des-popup {<br />
display: inline-block;<br />
width: 70%;<br />
font-size: 14px;<br />
color: #676767;<br />
line-height: 21px;<br />
}<br />
#bio_ep_content form {<br />
padding-top: 25px;<br />
}<br />
#bio_ep_content form input{<br />
font-size: 16px;<br />
padding: 7px 17px;<br />
border: 1px solid #a4a4a4;<br />
border-radius: 30px !important;<br />
}<br />
#bio_ep_content form input:active {<br />
border: 1px solid #80C56E !important;<br />
}<br />
#bio_ep_content form input:focus {<br />
outline: none;<br />
}<br />
#bio_ep_close {<br />
margin: 5px 0 0 -46px;<br />
width: 41px;<br />
height: 28px;<br />
padding: 7px 0;<br />
background-color: #fff;<br />
color: #5c5c5c;<br />
border-radius: 100%;<br />
font-size: 22px;<br />
font-family: calibri;<br />
}<br />
#bio_ep_close:hover {<br />
background-color: #ececec;<br />
}<br />
.bio_btn {<br />
display: inline-block;<br />
font-size: 14px !important;<br />
margin: 18px 0;<br />
padding: 7px;<br />
color: #fff;<br />
font-size: 14px;<br />
font-weight: 600;<br />
background-color: #80C56E;<br />
border: 1px solid #80C56E !important;<br />
cursor: pointer;<br />
-webkit-appearance: none;<br />
-moz-appearance: none;<br />
border-radius: 30px;<br />
text-decoration: none;<br />
box-shadow: 1px 1px 4px #0000006b;<br />
}<br />
#social-popup {<br />
padding-bottom: 14px;<br />
font-size: 12px;<br />
}<br />
#social-popup a {<br />
text-decoration: none;<br />
color: white;<br />
margin: 0 5px;<br />
}<br />
.sp-btn{<br />
padding: 5px 10px;<br />
border-radius: 4px;<br />
}<br />
#fb-popup{<br />
background: #39569B;<br />
}<br />
#gp-popup{<br />
background: #DA4835;<br />
}<br />
#ig-popup{<br />
background: #251F21;<br />
}<br />
]]>
4. Selesai,
Edit
Script selesai dipasang, sekarang waktunya kita edit
Edit Gambar
1. Cari kode ini
<![CDATA[<br />
<!-- your image here --><br />
<img decoding="async" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_BRLL7bH1HYrhQA-sHd4jiF0RRpQsBkL_SQDADBgVRNr5F4EqBSb619LItBQAjrxnAXotoSRY6HKEZFrJbnGJHl73As4_PVCMxarqPAoxYg52KJhHVVXE_GaCucVGuSXJwQO6OXhCikJ/s1600/grow-new.png" width="100%" alt="Grow" /><br />
]]>
2. Ubah link bagian https://blablabla ke gambar yang diinginkan
Recommended: Usahakan lebar gambar berukuran 550px
Judul dan Deskripsi
1. Cari kode ini
<![CDATA[<br />
<!-- title and text --><br />
<span>HELP US GROW!</span><br />
<span>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[<br />
<!-- form subscribe here --></p>
<div></div>
<p>]]>
2. Ubah form sesuai code form berlangganan agan
Tombol Sosmed
1. Cari kode ini
<![CDATA[</p>
<div>
<a href="http://www.fishertekno.com/#"><span><span></span> Facebook</span></a><br />
<a href="http://www.fishertekno.com/#"><span><span></span> Google+</span></a><br />
<a href="http://www.fishertekno.com/#"><span><span></span> Instagram</span></a>
</div>
<p>]]>
2. Ubah # sesuai link masing-masing sosmed agan
Selesai 😀 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[<br />
bioEp.init({<br />
cookieExp: 0,<br />
delay: 5<br />
});<br />
]]>
2. Edit code ini untuk durasi jeda
<![CDATA[<br />
delay: 5<br />
]]>
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
