3 Cara Mudah Membuat Pop-Up Window Banner Promosi di Blog

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

4 Responses to "3 Cara Mudah Membuat Pop-Up Window Banner Promosi di Blog"

  1. Terima kasih gann... Scripnya berjalan .. Keren!

    ReplyDelete
  2. Terima kasih kak sangat bermanfaat, kalo boleh tau untuk rentan waktu munculnya banner pop up nya nanti berapa lama ya?

    ReplyDelete
    Replies
    1. Untuk muncul langsung tampil mas, dan waktunya tidak terbatas, klo di close baru nutup

      Delete

Komentar anda adalah motivasi kami!
Untuk menyisipkan code gunakan
<i rel="code">Tuliskan Code</i>
Untuk menyisipkan gambar gunakan
<i rel="image">URL Gambar</i>
Untuk menyisipkan catatan gunakan
<b rel="quote">Tuliskan Catatan Anda</b>
Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel