Basic Pembuatan Auto Popup di Blog

Hai kawan Ane kali ini akan berbagi Basic Pembuatan Auto Popup di Blog dengan tambahan sedikit serbuk Css & JavaScript , Jquery.Auto Popup tersebut berfungsi sebagai sarana kalian untuk menyampaikan pesan kalian atau pun yang lainnya sesuai keinginan kalian dengan gambar yang kalian masukan.. Namun pada gambar di samping saya sengaja tidak memasang gambar / tidak memasukan gambar sebagai DEMO dari Auto Popup tersebut.


Langsung saja tak perlu banyak lama dan basa basi yang hanya membuat bosan pembaa saja...

Langkah - Langkah 

________________________________________________________________________________

Langkah pertama kalian Perlu memasukan atau memasang Jquery di bawah ini tapi tangan di pakai apabila sudah tertempel / terpasang di balam Template kalian.

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

Kedua Simpan kode Css di bawah ini tepat sebelum kode </head>

<style type="text/css">
/* Rhe 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvkTFAvZg-D_D-MO0GOG8Twas8k79SiFAx2j07ZXmP21F31n4CgE5wE-aVOKkal7wCivPYPyLrNCvkWukeGAUOgNUuzDMf8842v0aXvNhudl0ZHQ0oH_pMVkkcHZpRnSIow0TfCuEi0lIi/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>

dan yang terakhir simpan JavaScript & HTML di bawah ini tepat sebelum </body> , agar Popup nya berjalan

<!-- jQuery Rhe-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/AVvXsEggRnKdZ1S6OnY_UvQO_9zf8vJc6q1vyHU4YkChyphenhyphenaG4VC94ShgtnwyA4gtQ5O8v3NufAuyBd9WscHm72_MQfFA-W3wTl5sFglBqNOQxamiqiHYFqd-xBeeiI0iFk075ChdNX0p0G6sdtQNh/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>

<script type='text/javascript'>
// JavaScript Rhe-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 Rhe-Box [ End ] -->

Keterangan tambahan untuk kode HTML di atas :

1. Ganti alamat gambar :
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggRnKdZ1S6OnY_UvQO_9zf8vJc6q1vyHU4YkChyphenhyphenaG4VC94ShgtnwyA4gtQ5O8v3NufAuyBd9WscHm72_MQfFA-W3wTl5sFglBqNOQxamiqiHYFqd-xBeeiI0iFk075ChdNX0p0G6sdtQNh/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.

Selamat Mencoba....| Jangan Lupa Berkomentarya...

Share :

Tweet

✚

Related Post