Bismillah Gratisâ„¢

Software Komputer Dan Aplikasi Android Terbaru Full Version, Crack, Keygen, Serial Number, Patch, Loader, APK Mod, Game RePack, Game Highly Compressed Dan Tutorial Komputer Secara Gratis

Cari Blog Ini

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

Tidak ada komentar:

Posting Komentar

Sitemap