Cara Membuat Popup Banner Dengan CSS Dan Timeout Javascript

Kangentot - Cara Membuat Popup Banner Dengan CSS Dan Timeout Javascript. Kebetulan besok umat muslim akan menjalani puasa selama 1 bulan penuh, maka hari ini kita akan membuat popup banner untuk ucapan Marhaban ya Ramadhan dengan CSS dan Javascript untuk timeout atau jeda kemunculannya. Trik ini juga bisa digunakan untuk slot iklan popup banner bila ada advertiser yang menginginkan slot iklan jenis popup banner.

Popup banner ini akan muncul setelah pengunjung beberapa detik membuka halaman, jadi ada waktu jeda kemunculannya setiap membuka atau merefresh halaman. Tentu saja popup banner ini mudah ditutup untuk melanjutkan membaca konten dengan klik di luar banner atau pada tombol close.

Dan dengan ini kita dapat menambah penghasilan dari blog dengan menyediakan slot iklan popup banner. Banyak advertiser yang mencari pemasangan iklan dengan jenis popup banner seperti ini, jadi kenapa kita tidak menyediakannya?

Agar lebih jelas mengenai popup banner ini, silahkan coba demo berikut, tunggu beberapa saat setelah halaman terbuka.

DEMO

Jika Anda ingin mencobanya, silahkan copy kode berikut ini dan simpan di atas kode </body>

<style>

.hide{display:none;visibility:hidden;}

.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}

.pop-content{width:850px;height:450px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}

.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}


.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}

.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}

.flowbox{position:relative;overflow:hidden}

@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}

.popcontent img{height:auto}

}

</style>

<div class="popbox hide" id="popbox">


<a href="#" target="_blank" rel="noopener noreferrer" title="box">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>

<div class="pop-content">




<div class="popcontent">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZl9-pUa1A0-BnFVWAWsxeiw-T_4ko6E6fBOrth1k65tBRz3VunM6m9nRy9zvtjbVDuLJWq7HrGYYpuujAQBSJX8_GaldhRNbu2YDPhCzgvhsygJObfO22utp0Sh-tbYduV-6untgwLC8/s850/ramadan.jpg" alt="banner" width="850" height="450"/>
</div>


</a>

<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&times;</button>
</div>


<script>
</div>



setTimeout(function(){
//<![CDATA[



 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"


 }, 5000);

function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bflowbox\b/g,"")}
//]]>


 </script>

Kode width:850px;height:450px; disesuaikan dengan lebar dan tinggi banner yang akan dipasang. Kode margin:-225px 0 0 -425px; silahkan sesuaikan, -225px silahkan sesuaikan dengan nilai negative dari tinggi banner dibagi 2, sama juga dengan -425px adalah nilai negative dari lebar banner dibagi 2.

Kode <a href="#" target="_blank" rel="noopener noreferrer" title="box"> dan </a> silahkan hapus jika Anda hanya memasang banner saja tanpa link tujuan.

Kode × silahkan rubah jadi × jika Anda memasangnya di Blogger.

Angka 5000 silahkan atur tambah atau kurangi untuk menambah atau mengurangi waktu jeda kemunculan bannernya.

Selamat mencoba dan semoga bermanfaat.