Walaupun hal tersebut sudah sering ditulis oleh blogger lainnya, namun tak ada salahnya jika saya tulis kembali artikel tentang bagaimana Cara Membuat Iklan Melayang pada blog anda dengan menggunakan metode jQuery ? Jika anda ingin mencoba Cara Membuat Iklan Melayang pada bloga anda, silahkan anda ikuti langkah-langkah berikut ini :
1. Login ke akun Blogger anda.
2. Klik Edit HTML.
3. Kemudian Cari kode : </head> dan letakkan kode dibawah ini tepat diatasnya :
<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>
4. Klik save/simpan template.
Dan selanjutnya lakukan hal tersebut :
1. Masuk ke Rancangan
2. Tambah widget HTML/JavaScript dan copas kode tersebut :
<div id='kotak-pesan'>
DISINI KONTEN ADA,
Bisa Iklan, Facebook, atau Sesuka Hati Anda
<img src="http://media.vivanews.com/thumbs2/2009/09/26/77056_jennifer_love_hewitt_300_225.jpg" width="289" />
<a class='close' href='#'>×</a>
3. Silahkan ganti kode dan url tersebut diatas sesuai keinginan anda dan simpan.
Nah, begitulah langkah-langkah yang harus anda lakukan dalam hal mencoba Cara Membuat Iklan Melayang pada blog anda, selamat mencoba.
Judul : Cara Membuat Iklan Melayang
Deskripsi : Walaupun hal tersebut sudah sering ditulis oleh blogger lainnya, namun tak ada salahnya jika saya tulis kembali artikel tentang bagaimana Ca...
