Judul : Membuat Auto Popup di Blog
link : 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="#">×</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG5fYuoL_hG5x4EqhJLoalnM-VAxIZvLazk33OVyCAnnedyCJHeFFGdkZY6kfSDdXQ7oPyDB1t7Z6ehdanTFfC3bFG7YIiqQZ18fqj7rTkLgg1ZeuLPOPiv17vdSqbYGBHzJWatXd-Vic/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 :
- Ganti alamat gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG5fYuoL_hG5x4EqhJLoalnM-VAxIZvLazk33OVyCAnnedyCJHeFFGdkZY6kfSDdXQ7oPyDB1t7Z6ehdanTFfC3bFG7YIiqQZ18fqj7rTkLgg1ZeuLPOPiv17vdSqbYGBHzJWatXd-Vic/s1600/SPACE-PROMOTE-600X400-PIXEL.png
dengan alamat gambar yang ingin sobat tampilkan. berukuran ( 600 x 400 pixel ) #linkdengan alamat Link yang di inginkan.