Membuat Ads Popup Dengan Efek Jquery

Mari kita simak tip kali ini. Yang berhubungan dengan kotak iklan atau tempat iklan, bahasa kerennya Ads Popup Dengan Efek Jquery.

Nggak usah banyak-banyak keterangannya soalnya keburu mau Sholat Maghrib. Maka dari itu kami menyempatkan diri untuk berbagi ke sahabat blogger.

Langkah 1

1. Log in ke blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Cari Kode </head>
5. Setelah ketemu masukan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>
<style>
#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:10px;
background:#E9CF5F;
border:2px solid #fff;
font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
#kotak-pesan a.close{
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>

• Simpan Templates anda yang sudah kamu Edit

Langkah 2

Setelah itu Masuk di Elemen Laman,

• Klik Tambah Gadget
• Pilih HTML/Javascript
• Lalu masukan kode di bawah ini

<div id='kotak-pesan'>

ISI KONTEN YANG KAMU MAU

<a class='close' href='#'>&times;</a>
</div>