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 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>

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/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

#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

<!-- 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

<!-- 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

<!-- 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

<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

See the Pen Smart PopUp Grow Style by Ricky_Hatton (@rickyhatton) on CodePen.

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

bioEp.init({ cookieExp: 0, delay: 5 });

2. Edit code ini untuk durasi jeda

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

Read More

Codingtime!: Menciptakan Database Transaksi Lebih Dari Satu Jenis Barang

Hai guys dan selamat tiba di seri terbaru kami, CodingTime! Yup guys seri kali ini kita akan berguru bareng perihal seluk beluk coding. Dalam transaksi sekarang, telah kita jumpai banyak supermarket, market kecil atau lainnya sudah berbasis komputer .

Setelah bayar, kita biasa diberi nota yang isinya barang - barang yang kita beli. Nota dengan no unik disimpan di database tapi setiap notanya punya detail barang yang berbeda - beda. Bagaimana? Ini ia caranya

Pertama kita akan gunakan Microsoft Access biar biar praktis dipahami
Lanjut:
1. Kita buat dua tabel, tabel pertama tbpenjualan dan kedua tbdetail_jual (nama boleh bebas)
2. Kita isi tabel tbpenjualan dengan field= id_jual, tanggal, pembeli, total_bayar, pegawai

3. Lanjut, isi tabel tbdetail_jual dengan field = no, id_jual, id_jual, nama_produk, harga, jumlah, total_harga

4. Kemudian isi kedua tabel dengan data, pola berikut

tabel penjualan

tabel detai jual

5. Nah tinggal di hubungkan di relasi. Buka hubungan di tab table > Relation

6. Tambahkan semua tabel. Lalu klik dan seret id_jual di tabel tbpenjualan ke id_jual di tbdetailjual

7. Nah akan muncul opsi. Langsung klik create

8. Tutup tbpenjualan kemudian buka kembali dan selesai

Penjelasan, tbpenjualan, untuk menyimpan nota transaksi berisi tanggal, nama pembeli, total bayarnya dan pegawai atau kasir.

Kemudian tbdetail untuk detail barang yang dibeli berdasarkan no transaksi. Berisi id transaksi, nama produk, harga, jumlah beli kemudian total harga.

Total harga disini beda dengan total bayar. Total harga berisi harga produk per satu buah dikali jumlah belinya. Sedangkan total bayar yaitu total harga yang harus dibayar pembeli, diambil dari penjumlahan seluruh total harga.

Siap, kini kita sanggup membeli banyak barang beda jenis dan sanggup disimpan di database. Masih bingung? hening agan sanggup unduh pola databasenya disini.

Ok guys, alhasil selesai Cara Membuat Database Transaksi Lebih dari Satu Barang. Bila bermanfaat jangan lupa share dan komen jikalau ada pertanyaan. Matur nuwun




Semoga Bermanfaat

Read More