Jendela pop up atau lebih dikenal dengan pop up merupakan sebuah jendela yang muncul secara otomatis pada layar monitor kalian tanpa adanya pemberitahuan, sehingga jendela tersebut muncul secara otomatis tanpa diperintahkan sebelumnya.
Ukuran jendela pop up tersebut biasanya bervariasi, namun tidak menutup secara keseluruhan dari ukuran layar monitor. Kesempatan kali ini, Amirs ID akan memberikan tutorial cara membuat widget pop up berdasarkan waktu yang telah ditentukan.
Postingan kali ini, sebenarnya ada kaitannya dengan postingan sebelumnya, yaitu cara membuat PopUP kartu ucapan di blog. Namun letak perbedaannya yaitu pada tutorial ini kita akan menambahkan perintah waktu kapan jendela tersebut harus muncul berdasarkan setting waktu yang telah ditentukan. Langsung saja untuk tutorialnya, silahkan ikuti langkah-langkah dibawah ini.
Sebelum kalian mengikuti tutorial dibawah ini, pastikan bahwa template kalian telah terpasang jQuery, jika belum silahkan tambahkan kode jQuery dibawah ini tepat berada diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> Cara Membuat Widget PopUp Berdasarkan Waktu
1. Silahkan masuk kedalam akun blogger kalian terlebih dahulu
2. Masuk ke menu Template > Edit HTML
3. Carilah kode ]]></b:skin> atau </style>
4. Tambahkan kode CSS dibawah ini, tepat berada diatas kode ]]></b:skin> atau </style>
#myModal{
display:none;
}
#timer{
visibility: hidden;
}
/*Widget Pop Up Card*/
#amirsid {
z-index: 1000;
position: fixed !important;
top: 100px;
left: 50%;
width: 700px;
margin-left: -350px;
}
#belakang {
left: 0px;
background: #000 none repeat scroll 0% 0%;
opacity: 0.6;
position: fixed;
z-index: -1;
top: 0px;
height: 100%;
width: 100%;
}
.tulisan {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
collor:#344;
return:false;
}
.isinya {
border-radius: 3px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: 700px;
height: 400px;
border: 4px solid #FFF;
} 5. Setelah itu, tambahkan kode JavaScript dibawah ini, tepat berada diatas kode </body>
<script>
var count=-1; // initially -1 as we are having a delay of 1000ms
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count+1;
if (count >=6) //+1 than the req time as we have a delay of 1000ms
{
clearInterval(counter);
/////////////what code should go here for the modal to pop up??///////////////////////
$("#myModal").modal();
return;
}
document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
</script> Silahkan kalian rubah (count >=6) angka tersebut seusai dengan berapa lama (menit) yang diinginkan
6. Kemudian, carilah kode </head> dan tambahkan kode JavaScript dibawah ini, tepat diatas kode </head>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 7. Selanjutnya, tambahkan kode HTML dibawah ini, tepat berada diatas kode </body>
<span id="timer"></span>
<div class="modal fade" id="myModal" >
<div id='amirsid'>
<div id='belakang'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>×</a></div>
<div class='isinya'><a href='https://facebook.com/luckysyarif' target='_blank'><img style="width: 700px; height: 400px;" alt='Amirs ID on Facebook!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCm-7DGbT2L0NJAm9qElcdVDVQl18m63fkUfaqKaBt40eFLlUHsAC78yJs0cETYmbaCX2sNm5sBEjzpeaG9IYUZDNXnIW_CKGCRSj_nvIyudR6CbXZ4wHtHid7ztIVz8ki0d-zYiSR9Ee-/s1600/Tumbnail+1.png'/></a>
</div>
</div>
</div> Silahkan kalian ganti, url berwarna biru dengan url facebook kalian, dan url yang berwarna kuning dengan url gambar yang kalian inginkan.
8. Klik tombol Simpan Template
Cukup sekian tutorial cara membuat widget popup berdasarkan waktu. Semoga artikel yang ke 50 ini bermanfaat bagi kita semua, dan jika masih ada hal yang kurang dimengerti silahkan berikan komentar dibawah. Sekian dan terimakasih.
EmoticonEmoticon