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 ketika 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 bakir 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 pribadi saja!
Memasang Script 1. Pertama kita masuk ke admin kemudian tambah external javascript ini, di atas </body>
<![CDATA[ ]]> 2. Lalu tambahkan code htmlnya di bawah tag <body>
<![CDATA[ <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/AVvXsEhLF8ugj5JQhHiIcZrxRjfxfCm6AJ6AgU_JhTflJSZiMszS9zv0nPvpP2ZYMof_utTaBvkezMTP_b2-FVR38dyj5FIDKINjQ2ruZGh5iF9GqbzTeE8v23zzVaxNZDB-F8hxf1Mwxvum0XIc/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
<![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, kini waktunya kita edit
Edit Gambar
1. Cari instruksi ini
<![CDATA[ <!-- 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/AVvXsEhLF8ugj5JQhHiIcZrxRjfxfCm6AJ6AgU_JhTflJSZiMszS9zv0nPvpP2ZYMof_utTaBvkezMTP_b2-FVR38dyj5FIDKINjQ2ruZGh5iF9GqbzTeE8v23zzVaxNZDB-F8hxf1Mwxvum0XIc/s1600/grow-new.png" width="100%" /> ]]> 2. Ubah link bab https://blablabla ke gambar yang diinginkan
Recommended: Usahakan lebar gambar berukuran 550px
Judul dan Deskripsi
1. Cari instruksi 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 instruksi 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 instruksi 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 galau 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 instruksi 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 ketika 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 ketika 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 ketika 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 bakir ini. Bila ada kesalahan atau pertanyaan pribadi komen.
Semoga Bermanfaat
