3 Cara Mudah Membuat Pop-Up Window Banner Promosi di Blog
Wahyu Development - Bagaimana cara membuat pop-up window tampil di halaman blogger/blogspot dan atau wordpress?
Pop-Up Window adalah cara menampilkan file ataupun gambar di halaman website dengan tombol tutup (close) yang dapat berfungsi dengan baik.
Dengan menggunakan script ini, anda dapat memberi informasi kepada pengunjung website anda, apa yang ingin anda sampaikan, baik promo dan lain sebagainya. Untuk menggunakan script ini sangatlah mudah. Ok langsung saja!
1. Langkah Instalasi
Silahkan buka dashboard website anda, disini saya mencontohkannya dengan menggunakan platform Blogger. Pada halaman dashboard Blogger silahkan anda klik Layout --> lalu tambah Gedget --> kemudian pilih HTML/JavaScript.
2. Copy Script Banner
Pada halaman HTML/JavaScript silahkan anda paste script berikut ini.
<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>
<br />
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'/>
<div class="pop-content">
<a href="#" target="_blank" rel="noopener noreferrer" title="Judul Banner">
<br />
<div class="popcontent">
<img src="https://1.bp.blogspot.com/-UPDsrEqGjGQ/X6436IHJSWI/AAAAAAAAI78/PEylSSb_LM8XtSsNumpLjLM7HhCk6ZXtwCLcBGAsYHQ/s383/Cara%2BMudah%2BMengatasi%2BDomain%2BDiblokir%2BFacebook%2BDengan%2B1x%2BKlik%2BTerbaru.png" alt="banner" width="850" height="450"/>
<br />
</div>
</a>
<br />
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>×</button>
<br />
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
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>
Catatan : silahkan ganti title sesuai dengan yang anda inginkan dan ubah url gambar sesuai yang anda ingin tampilkan, jika dirasa ukuran banner kurang sesuai anda dapat merubah code yang saya tandai dengan warna kuning
3. Penyimpanan
Langkah terakhir silahkan anda save gedget tersebut dengan demikian anda dapat mencoba melihat script yang baru saja anda pasang di halaman website anda. Maka akan tampil seperti ini.
Itulah 3 (tiga) langkah mudah memasang pop-up window di blogger, berikan komentar anda, jika ada hal yang anda butuhkan silahkan tuliskan di kolom komentar, admin akan segera mendiskusikan dan memposting pesan yang anda inginkan. Semoga bermanfaat . . .
Terima kasih gann... Scripnya berjalan .. Keren!
ReplyDeletesama-sama gan :)
DeleteTerima kasih kak sangat bermanfaat, kalo boleh tau untuk rentan waktu munculnya banner pop up nya nanti berapa lama ya?
ReplyDeleteUntuk muncul langsung tampil mas, dan waktunya tidak terbatas, klo di close baru nutup
DeleteGimana cara ubah biar gak tampil setiap halaman? Cukup sekali saja sehari biar nggak mengganggu.
ReplyDelete