Cara membuat pesan pemberitahuan pop up yang muncul hanya sekali per hari untuk setiap pengunjung

Pesan pemberitahuan berbentuk pop up yang memiliki nama lain seperti modal pop up, prompt pop up, warning message, dan lain sebagainya ini, berfungsi untuk menyampaikan hal penting kepada pengunjung blog, baik di awal ketika blog dibuka maupun di akhir saat halaman blog ditutup.

Pesan Pop Up dan fungsinya

Tapi, pesan pop up ini ternyata lebih banyak digunakan di awal ketika halaman blog dibuka oleh pengunjung karena secara logika memang seharusnya seperti itu sebab lebih banyak hal yang bisa disampaikan kepada pengunjung sebelum mereka mulai menjelajahi blog kita daripada sebaliknya, terutama jika blog tersebut termasuk ke dalam kategori blog yang menyajikan konten terbatas pada usia tertentu.

Di situlah fungsi pop up yang bertindak sebagai perantara persetujuan antara pemilik blog dan pengunjung. Di mana ketika pengunjung setuju dengan isi pesan, maka mereka dapat melanjutkan kegiatan browsing ataupun membaca di blog kita.

Tips menggunakan pesan Pop Up

Tapi walaupun demikian, beberapa orang menganggap bahwa pesan pop up ini sangat mengganggu dikarenakan kemunculannya yang terlalu sering, yang mana hal seperti itu kerap dilakukan oleh para penyedia iklan berbasis CPM yang memunculkan iklan pop up secara bertubi-tubi.

Maka dari itu, kita sebagai pemilik blog hendaknya berlaku bijaksana dalam menggunakan pesan berjenis pop up ini demi kenyamanan para pembaca blog.

Tak hanya itu, pop up juga berpengaruh terhadap perayapan yang dilakukan oleh robot milik mesin penelusuran seperti Google, Bing, ataupun Yandex. Di mana ketika robot menjelajahi seluruh isi blog, mereka akan terkendala oleh pesan pop up tersebut yang mereka sebut sebagai jendela munculan, terutama untuk robot perayap milik Yandex yang sangat sensitif terhadap pop up.

Sehingga dengan ini, penggunaan pesan pop up harus dilakukan sewajarnya dengan hanya menempatkan 1 pesan pop up saja, yang tanpa pengalihan, serta diikuti dengan tombol untuk menutupnya, dan tombol ini harus mudah diakses ketika ditampilkan di segala jenis perangkat atau dengan kata lain harus responsive.

Untuk itulah di sini Blogizty membagikan script pesan pop up yang terdiri dari CSS, HTML, dan JavaScript. Di mana JavaScript ini dibutuhkan untuk mengatur berapa hari sekali pesan pop up akan ditampilkan kepada pengunjung.

Deskripsi script pesan Pop Up Blogizty

Di bawah ini merupakan penjelasan dan keterangan dari script pop up yang dibagikan di artikel ini.

• Pesan pop up ini menggunakan cookie yang telah diatur kemunculannya setiap satu hari sekali untuk setiap pengunjung. Oleh sebab itu, ketika pengunjung telah menutup pesan pop up, maka ketika mereka beralih ke halaman lain di blog kita, pesan pop up tidak akan muncul lagi.

  Akan tetapi ketika pengunjung kembali mengunjungi blog kita pada keesokan harinya, dalam arti 24 jam, maka mereka akan kembali bertemu dengan pesan pop up ini, alias muncul kembali.

  Namun hal tersebut tidak berlaku apabila, pada hari yang sama, pengunjung membersihkan atau menghapus cookies pada browser setelah mereka mengunjungi blog kita. Sehingga apabila pengunjung melakukan hal tersebut, maka ketika mereka mengunjungi blog kita, pesan pop up akan muncul saat itu juga dan tidak akan menunggu hari esok.

• Script yang digunakan adalah pure JavaScript, sehingga tidak terlalu membebani loading blog seperti layaknya jQuery, dan bahkan script cookie juga diambil dari W3School.

• Tampilan sengaja dibuat sederhana karena tujuan dari pesan pop up ini hanya sebagai sarana untuk menyampaikan pesan-pesan penting saja, sehingga kamu boleh mengganti dan mengubah kata-kata dalam pesan pop up sesuai dengan keinginan kamu.

Script pesan pemberitahuan Pop Up

Pemasangan script ini sangat mudah dan pasti berhasil karena hanya satu kali pemasangan untuk seluruh script.

Untuk memulai, kamu hanya perlu menyalin script di bawah ini untuk kemudian ditempelkan pada kolom gadget manapun. Tapi lebih bagus lagi di Sidebar.

Script CSS, HTML, dan JavaScript

Caranya, buka menu Tata Letak. Kemudian pada salah satu kolom gadget, klik Tambahkan Gadget, pilih HTML/JavaScript.

Pada kolom dialog yang muncul, kosongkan kolom Judul, kemudian tempelkan script pesan pop up ke dalam kolom Konten.

<!--PopUp GiztaPop Start-->
<style>
#giztapop-pad{display:none;background:rgba(0,0,0,.5);width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;box-sizing:border-box}
#giztapop-content{background:#fdfdfd;position:relative;width:98%;height:98%;max-width:400px;max-height:220px;border:4px solid #ccc;border-radius:10px;margin:12% auto;overflow:hidden;box-sizing:border-box}
.giztapop-display {width:100%;height:100%;display:block;padding:8px;box-sizing:border-box}
.giztapop-name {display:block;font-size:22px;font-weight:600;color:#555;margin-bottom:8px;padding:0 5px 5px;border-bottom:1px solid #ccc}
.giztapop-item {font-size:16px;font-weight:300;color:#555;line-height:1.6;box-sizing:border-box}
.giztapop-hide{background:#7f7fff;position:absolute;right:8px;bottom:8px;font-size:14px;font-weight:400;color:#fff;padding:3px 8px;border-radius:3px;border:1px solid #ccc;cursor:pointer}
</style>
<div id="giztapop-pad">
    <div id="giztapop-content">
        <div class="giztapop-display">
			<span class="giztapop-name">Blogizty</span>
            <div class="giztapop-item">
                Halo, Selamat Datang di Blogizty
					<br>
				Blog yang membahas tentang tutorial blogging serta tips & trik seputar Blogger untuk pemula
            </div>
            <div class="giztapop-hide" id="giztapop-hide"><span>CLOSE</span></div>
        </div>
    </div>
</div>
<script>
//<![CDATA[
function setCookie(cname,cvalue,exdays){var d=new Date;d.setTime(d.getTime()+exdays*24*60*60*1e3);var expires="expires="+d.toUTCString();document.cookie=cname+"="+cvalue+";"+expires+";path=/"}function getCookie(cname){var name=cname+"=";var decodedCookie=decodeURIComponent(document.cookie);var ca=decodedCookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' '){c=c.substring(1)}if(c.indexOf(name)==0){return c.substring(name.length,c.length)}}return""}document['\x62\x6f\x64\x79']['\x6f\x6e\x6c\x6f\x61\x64']=function checkCookie(){var _0x9a2885='\x67\x69\x7a\x74\x61\x43\x6f\x6f\x6b\x69\x65',_0x1274eb=getCookie(_0x9a2885),_0x49098d=document['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64']('\x67\x69\x7a\x74\x61\x70\x6f\x70\x2d\x70\x61\x64'),_0x2dd7c1=document['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64']('\x67\x69\x7a\x74\x61\x70\x6f\x70\x2d\x68\x69\x64\x65');_0x1274eb!=''?_0x49098d['\x73\x74\x79\x6c\x65']['\x64\x69\x73\x70\x6c\x61\x79']='\x6e\x6f\x6e\x65':(_0x1274eb=_0x49098d['\x73\x74\x79\x6c\x65']['\x64\x69\x73\x70\x6c\x61\x79']='\x62\x6c\x6f\x63\x6b',_0x1274eb!=''&&_0x1274eb!=null&&setCookie(_0x9a2885,_0x1274eb,1)),_0x2dd7c1['\x6f\x6e\x63\x6c\x69\x63\x6b']=function(){_0x49098d['\x73\x74\x79\x6c\x65']['\x64\x69\x73\x70\x6c\x61\x79']='\x6e\x6f\x6e\x65';};};
//]]>
</script>
<!--PopUp GiztaPop End-->

Modifikasi script Pop Up

• <span class="giztapop-name">Blogizty</span>

  Ubah kata Blogizty dengan kata-kata yang kamu kehendaki, baik itu nama blog kamu maupun kata-kata seperti Pemberitahuan, Peringatan, atau Selamat Datang juga boleh.

• <div class="giztapop-item">

  Ini adalah bagian utama dari kata-kata yang akan menjadi pesan untuk kamu sampaikan kepada pengunjung. Apabila ingin menambahkan kata-kata di baris baru atau paragraf baru, maka jangan lupa untuk menambahkan tag <br> yang berfungsi sebagai enter.

Setelah itu jangan lupa simpan pengaturan, kemudian coba lihat blog, pasti pesan pop up akan muncul. Dan untuk mengetahui apakah script cookie bekerja, maka kamu perlu menutup pesan pop up tersebut untuk kemudian muat ulang halaman.

Bilamana pesan pop up tidak muncul kedua kalinya, maka itu berarti bahwa script cookie bekerja dengan baik. Dan untuk lebih meyakinkan, kamu boleh menghapus cookies pada pengaturan browser. Kemudian setelah itu kamu boleh mengunjungi blog, dan pada saat itu, pesan pop up pasti muncul kembali.

©Blogizty