Cara Membuat Auto Popup di Blog Menggunakan CSS dan JavaScript


        Alhamdulillah, ternyata saya masih diberi kesempatan untuk berbagi, dan malam ini Bismillah Gratis™ ingin membahas tentang Basic Pembuatan POPUP Gambar di Blog dengan menggunakan sedikit bumbu CSS & JavaScript. POPUP yang akan Bismillah Gratis™ bagikan kali ini 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 ingin sobat tampilkan.


      Seperti yang sudah sobat Bismillah Gratis™ lihat di blog Bismillah Gratis™ ini, berikut adalah langkah-langkah cara memasang POP-UP Banner di Halaman Awal Blog .

Langkah - Langkah Cara Pemasangan :

      1. Pastikan sobat Bismillah Gratis™ 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.
     2. Simpan Bumbu CSS di bawah ini tepat sebelum kode </head>

<style type="text/css">
/* BismillahGratis Box CSS */
@media (max-width:800px){ #bg-box { display:none; } }
#bg-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;
}
#bg-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;
}
#bg-box a.close-popup:hover { color:#fff; }
#bg-box a.close-popup:active { opacity:0; }
#bg-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; }
#bg-box div.gambar-space { border:5px solid #fff; position:relative; background:#fff;border-bottom:0px;}
#bg-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 BG-Box [ Begin ] -->
<div id="BG-box">
<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 BG-Box
$(window).bind("load", function() {
$('#bg-box').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery BG-Box [ End ] -->
Keterangan tambahan :
  1. Untuk kode HTML di atas : Ganti alamat gambar : http://1.bp.blogspot.com/-Eq--wpK-4ko/U10QpJeZN6I/AAAAAAAAE3c/0Qb_BlUQUzg/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.
  3. Judul : Ganti sesuai keinginan anda 
       Sekian Tutorial tentang Cara Pembuatan Auto POPUP Banner Gambar di Blog dengan CSS dan JavaScript yang ingin saya bagikan. Semoga bermanfaat untuk sobat Bismillah Gratis™ yang membutuhkan plugin ini, jika ada pertanyaan silahkan di tanyakan melalui form komentar dibawah ini atau melalui Facebook, tak lupa saya ucapkan terima kasih karena sudah meluangkan waktu-nya untuk berkunjung di blog sederhana saya ini . Salam Blogger


Top