Membuat Auto Popup di Blog

Membuat Auto Popup di Blog

Lyezha Komputer - kali ini kita akan membahas tentang Membuat POPUP Gambar di Blog dengan menggunakan sedikit bumbu CSS & JavaScript. 
POPUP yang akan kita buat bersifat auto display! yang artinya begitu pengunjung mengunjungi blog sobat POPUP akan langsung di tampilkan semata-mata untuk memberitahukan kepada pengunjung baik Informasi, Berita, Iklan, maupun Kutipan sesuai dengan keingin anda.

Cara Pemasangan
Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum code </head> pada halaman Edit Template :

<!-- Library jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah-2 : Simpan Bumbu CSS di bawah ini tepat sebelum kode </head>

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

Terakhir : Simpan kode JavaScript & HTML dibawah ini tepat di atas kode </body> , agar POPUP bisa di tampilkan.

<!-- jQuery KR-Box [ Begin ] -->
<div id="kr-box">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikV6lwdDJsm4ahzXaVfDBajwDbgOCWeJD6w-G6L16tdjPg5NF7vNiarTIrBPrIXt1GwNkDjOH0iGZohhwTQ3m9jX12GA2YxAM-dPNAZfF5eCx1OjR9BTIyDy2HB7craVKNMNNsq-2QCCa/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>

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

Keterangan tambahan untuk kode HTML di atas :

1. Ganti alamat gambar :
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikV6lwdDJsm4ahzXaVfDBajwDbgOCWeJD6w-G6L16tdjPg5NF7vNiarTIrBPrIXt1GwNkDjOH0iGZohhwTQ3m9jX12GA2YxAM-dPNAZfF5eCx1OjR9BTIyDy2HB7craVKNMNNsq-2QCCa/s1600/SPACE-PROMOTE-600X400-PIXEL.png
   dengan alamat gambar yang ingin sobat tampilkan. berukuran ( 600 x 400 pixel )
2. #link dengan alamat Link yang di inginkan.

Bagikan ke Facebook