Cara Membuat Pop Up di Halaman Depan Blog

Pop Up atau Iklan sembulan (bahasa Inggris: pop-up advertisement) adalah jendela iklan yang biasanya muncul tiba-tiba jika mengunjungi suatu halaman web. Biasanya iklan ini tidak diperlukan dan harus disingkirkan agar tidak mengganggu proses berselancar di web.

Kadang kala hal ini mengganggu pengunjung blog jika pengunjung merasa hal tersebut tidak diharapkan. Tetapi ada juga manfaat lain bagi pemilik blog misalnya ingin mengumumkan hal penting kepada pembaca terkait dengan informasi penting di blog.

Nah berikut ini adalah tutorial membuat tampilan pop up di blog kalian

Pertama, Masuk ke Blogger

Kedua, Pilih Template/Tema

Ketiga, Masuk Edit HTML

Copy Kode CSS berikut di atas kode </head>

 
<style type="text/css">

/* PopUp Box CSS Bahastutorial.com */
@media (max-width:800px){#bahastutorialbanner{display:none}}
#bahastutorialbanner{position:fixed!important;position:absolute;top:-700px;left:39%;margin:0 0 0 -182px;font:normal Dosis,Georgia,Serif;color:#333;-webkit-box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333;background:#fff;z-index:99999;}
#bahastutorialbanner a.close-popup{position:absolute;top:-25px;right:0;font:25px Arial,Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer}
#bahastutorialbanner a.close-popup:hover{color:#fff}
#bahastutorialbanner a.close-popup:active{opacity:0}
#bahastutorialbanner div.black-bg{background:#000;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:-500}
#bahastutorialbanner div.gambar-space{border:5px solid #fff;position:relative;background:#fff;border-bottom:0}
#bahastutorialbanner div.gambar-space img{width:600px;height:400px}
</style>

Copy Kode JS(JavaScript) berikut di atas kode </body>

 
<script type='text/javascript'>
// JavaScript Popup Banner Box
$(window).bind("load", function() {
$('#bahastutorialbanner').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>

Copy Kode HTML berikut di bawah kode <body>

 
<!-- jQuery Popup Banner Box [ Begin ] -->
<div id="bahastutorialbanner">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="#linkgambar" alt="Judul"/></a>
</div>
</div>

Untuk contoh tampilan bisa lihat di sini. Pada kasus tersebut ingin mengganti blog Beasiswa.site menjadi yukbeasiswa.web.id