Cara Mudah Buat Pop-Up Window Banner Untuk Promosi di Blog

PayuBaco
Terkadang ketika mengunjungi sebuah website kita menemukan Pop Up Window yang digunakan untuk menampilkan iklan, Menurut Gadgetren.com secara teknis, pop up adalah area tampilan antarmuka pengguna grafis (GUI), yang biasanya berupa jendela kecil, yang akan muncul secara tiba-tiba di latar depan antarmuka visual saat kita melakukan sesuatu, seperti memilih tombol atau masuk ke halaman tertentu. Kegunan dari pop up window banner ini bisa kita gunakan untuk menampilkan informasi atau bahkan sebagai media untuk promosi kita terkait hal lainnya. Berikut Cara Mudah Buat Pop-Up Window Banner Untuk Promosi di Blog :

1. Pertama silahkan sobat membuka Dashboard Blog kemudian pilih Tata Letak lalu pilih Tambahkan Gadget terakhir pilih HTML/JavaScript.
2. Selanjutnya paa halaman Tata Letak silahkan sobat paste kode script di bawah 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqReQ1U3GZOP1edO9Ms8NIVX83WO1xwa0sSvPD0LxkTIZfVhuHiSSIp_ABMcO6GAuQfobb68MBuu8yEQ_GmKeB6PssjA2J1ROVAHu9LeRuZAT1ad4OHdE7pdsIzVTQY8ghgLEJJtG3Noo/s900/name+%25283%2529.jpeg" 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 : Pada bagian yang saya tandai berwarna biru terdapat tanda pagar yang bisa sobat ganti ke URL tujuan ketika banner di klik, judul banner, url banner dan juga ukuran gambar. Silahkan diedit sesuai kebutuhan.
3. Terakhir silahkan sobat klik Simpan. 
4. Selesai sekarang Pop Up Window sudah bisa dilihat di blog sobat.

Nah sobat itulah langkah mudah Cara Mudah Buat Pop-Up Window Banner Untuk Promosi di Blog. Terimakasih telah mengunjungi blog ini, jika ada saran atau masukan mengenai artikel ini silahkan tinggalkan di kolom komentar. Jangan lupa bagikan artikel ini ke teman-teman yang lain ya. Terima kasih dan samapai jumpa diartikel selanjutnya.

Sumber :