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

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post