Senin, 30 Juli 2018

Cara Mudah Membuat Banner PopUp di Blog


Hallo mamanx, berjumpa lagi dengan blog mhanx lo, MhanxUs. Kali ini gue akan share tutorial blog tentang Cara Membuat Banner PopUp di blogger.

Sebenarnya, untuk membuat sebuah banner popup di blog sangatlah mudah. Anda hanya perlu memasang beberapa kode html, css, dan javascript saja. Namun bagi pemula (N00B), tentu saja akan merasa sulit dan bingung.

Oleh sebab itu, saya akan membahasnya disini. Oke, tanpa berlama-lama lagi, langsung saja kita simak. Let's Goo....

Cara Membuat Banner PopUp di Blog

Ada beberapa langkah yang harus Anda lakukan untuk Membuat Banner PopUp di Blog tersebut. Diantaranya adalah sebagai berikut:

1. Pertama-tama silahkan Anda Login terlebih dahulu ke akun blog Anda, kemudian pilih Tema > Edit HTML. Lalu copy CSS berikut ini dan tempelkan sebelum kode <style>.

<style type="text/css">
/* PopUp Box CSS */
@media (max-width:800px){#WiraBox{display:none}}
#WiraBox{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;}
#WiraBox a.close-popup{position:absolute;top:-25px;right:0;font:25px Arial,Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer}
#WiraBox a.close-popup:hover{color:#fff}
#WiraBox a.close-popup:active{opacity:0}
#WiraBox div.black-bg{background:#000 url(http://3.bp.blogspot.com/-7A606zdRAD8/U10SZcdl9QI/AAAAAAAAE3o/V_9HMnP0fLQ/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:-500}
#WiraBox div.gambar-space{border:5px solid #fff;position:relative;background:#fff;border-bottom:0}
#WiraBox div.gambar-space img{width:600px;height:400px}
</style>

2. Cari kode </body>, lalu tempelkan kode HTML dibawah tepat sebelumnya.

<!-- jQuery Popup Banner Box [ Begin ] -->
<div id="WiraBox">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="http://1.bp.blogspot.com/-Eq--wpK-4ko/U10QpJeZN6I/AAAAAAAAE3c/0Qb_BlUQUzg/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>

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

3. Ganti URL gambar pada script HTML diatas dengan URL gambar milik Anda. Jika sudah, maka silahkan Anda klik Simpan dan lihat hasilnya.

Gimana mhanx? Mudah bukan!

Demikianlah tutorial singkat kali ini yang dapat Adm00n bagikan tentang Cara Membuat Banner PopUp di Blog. Jika ada pertanyaan, maka bertanyalah pada kolom komentar dibawah postingan ini. Semoga bermanfaat dan terima kasih.

Seorang pelajar SMA yang memiliki banyak sekali impian, dan salah satunya adalah ingin memilikimu.

1 komentar: