Curi Perhatian Visitor Dengan Smart Popup Untuk Web [Blogger, Dll]
Pernahkah agan mengunjungi website dengan ada pop up? Bukan, bukan yang klik kemudian muncul pop up XD tapi waktu mau keluar web ada pop up otomatis muncul, uwih. Nah jikalau agan perhatikan saya juga pasang :v Gimana caranya?
Pop up muncul dikala keluar web ini saya sebut saja Smart PopUp jikalau memang ada namanya komen gan. PopUp ini sangat berguna, selain tidak mengganggu pembaca setia kita juga cendekia menentukan 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 memakai script dari agan @beeker1121
Sebelum pop up mendeteksi cursor akan di jeda dahulu misal tunggu 10 detik atau 30 detik. Nah ini menciptakan sasaran pop up kita ke pengunjung lebih akurat, apakah itu pengunjung hanya lewat atau memang pembaca artikel.
Ok eksklusif saja!
Memasang Script
1. Pertama kita masuk ke admin kemudian tambah external javascript ini, di atas </body>
2. Lalu tambahkan code htmlnya di bawah tag <body>
<div id="bio_ep"> <div id="bio_ep_content"> <!-- your image here --> <img alt="Pernahkah agan mengunjungi website dengan ada pop up Curi Perhatian Visitor dengan Smart PopUp untuk Web [Blogger, dll]" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiVACpaET1176KTVWajmCVGrrQSTblKD3Z8jxsGkx2RkoyuwxT9-ERFTjeKi4Ir1-SGsAgik0jhyphenhyphenaJI9o4-98R6OSCwHMAoeXMWnMk6BRctCBd25YXcj8Q4Tp5FVf4N_soWEwPHs2_Eok/s1600/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
#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, kini waktunya kita edit
Edit Gambar
1. Cari isyarat ini
<!-- your image here --> <img alt="Pernahkah agan mengunjungi website dengan ada pop up Curi Perhatian Visitor dengan Smart PopUp untuk Web [Blogger, dll]" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiVACpaET1176KTVWajmCVGrrQSTblKD3Z8jxsGkx2RkoyuwxT9-ERFTjeKi4Ir1-SGsAgik0jhyphenhyphenaJI9o4-98R6OSCwHMAoeXMWnMk6BRctCBd25YXcj8Q4Tp5FVf4N_soWEwPHs2_Eok/s1600/grow-new.png" width="100%" /> 2. Ubah link bab https://blablabla ke gambar yang diinginkan
Judul dan Deskripsi
1. Cari isyarat ini
<!-- 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 isyarat ini
<!-- 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 isyarat ini
<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 gundah keseluruhan coding dapat lihat dibawah
Opsi
Tadi dijelaskan Pop up ada waktu jeda 10 detik atau 30 detik. Cara mengedit atau menambah ada di jsnya
1. Cari isyarat ini di javasscript
bioEp.init({ cookieExp: 0, delay: 5 }); 2. Edit code ini untuk durasi jeda
delay: 5 3. Tambahkan opsi lain yang diinginkan, tulis sesuai format
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 cendekia ini. Bila ada kesalahan atau pertanyaan eksklusif komen.
Semoga Bermanfaat
Pop up muncul dikala keluar web ini saya sebut saja Smart PopUp jikalau memang ada namanya komen gan. PopUp ini sangat berguna, selain tidak mengganggu pembaca setia kita juga cendekia menentukan 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 memakai script dari agan @beeker1121
Sebelum pop up mendeteksi cursor akan di jeda dahulu misal tunggu 10 detik atau 30 detik. Nah ini menciptakan sasaran pop up kita ke pengunjung lebih akurat, apakah itu pengunjung hanya lewat atau memang pembaca artikel.
Ok eksklusif saja!
Memasang Script
1. Pertama kita masuk ke admin kemudian tambah external javascript ini, di atas </body>
Edit
Script selesai dipasang, kini waktunya kita edit
Edit Gambar
1. Cari isyarat ini
Recommended: Usahakan lebar gambar berukuran 550px
Judul dan Deskripsi
1. Cari isyarat ini
1. Cari isyarat ini
Tombol Sosmed
1. Cari isyarat ini
Selesai :D monggo dicoba. Bila masih gundah keseluruhan coding dapat lihat dibawah
Opsi
Tadi dijelaskan Pop up ada waktu jeda 10 detik atau 30 detik. Cara mengedit atau menambah ada di jsnya
1. Cari isyarat ini di javasscript
| Name | Type | Default | Description |
|---|---|---|---|
| delay | integer | 5 | Waktu jeda popup mendeteksi mouse dikala halaman diakses. Jika melebihi maka popup gres bekerja. Jika showOnDelay aktif, waktu ini dipakai untuk jeda popup sebelum muncul otomatis |
| showOnDelay | boolean | false | Jika true maka popup otomatis muncul dikala waktu delay habis. Jika false popup muncul dengan metode mendeteksi mouse |
| cookieExp | integer | 30 | Jumlah hari kadaluarsa untuk cookie. Cookie dipakai untuk mendeteksi apakah popup telah muncul pada pengunjung sebelumnya. Popup gres muncul kembali ke pengunjung yang sama jikalau cookie melewati hari kadaluarsa. Set 0 biar 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 dikala sehabis 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 cendekia ini. Bila ada kesalahan atau pertanyaan eksklusif komen.
Semoga Bermanfaat