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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgNyTs6IzjROqPZ3p5SR0lUPauM7hPNQOTKT1U7fLdGFYaiGagvqv5PGj8bO6Gv1eOI1TQh7cU3P0WW9u0e1fi0mLz5KSFhPs2IVbcux5SlcmK1t_V5BJe7RsbmoLEHcruLOH3fa54Rh9/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMDuP-5fLScWOL4PuDm3b-s-6iJqUiDh4_MNhSQHAxGu9kGqLbRHw-kd0JHmswUi5TtIyiu_HYUghL2iJndFfXrXqn6n8_EpH144rqexlfMWVUNXb9YIdWt_39ff1xgTIvuPY0P5v-CfU/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 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMDuP-5fLScWOL4PuDm3b-s-6iJqUiDh4_MNhSQHAxGu9kGqLbRHw-kd0JHmswUi5TtIyiu_HYUghL2iJndFfXrXqn6n8_EpH144rqexlfMWVUNXb9YIdWt_39ff1xgTIvuPY0P5v-CfU/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