Cara Membuat Box Iklan Melayang dengan HTML ~ Belajar-Code

Kali ini Saya akan berbagi Cara membuat Box iklan melayang di Dengan HTML
pertama Kita buat CSS Kotak iklannya Seperti dibawah ini:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:25%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#000;
font:normal Dosis, Georgia, Serif;
color:#ff0000;
border:2px solid #333;
-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:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#ff0000;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000;
border:2px solid #333;
-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;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>

Lalu kita Beri efek JQuery agar terlihat lebih keren dengan kode dibawah ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

Setelah itu Tambahkan kode HTML iklan dibawah ini:

<div id='box-message'>

<center><a class="murub">IKLAN</a></center>
<center>
Masukan Script iklan anda disini
</center>
<script language="javascript">
document.write( unescape( '%3C%21%2D%2D%20%48%54%4D%4C%20%45%6E%64%20%2D%2D%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%63%6C%6F%73%65%27%20%68%72%65%66%3D%27%23%27%3E%26%74%69%6D%65%73%3B%3C%2F%61%3E%3C%70%20%73%74%79%6C%65%3D%22%20%66%6C%6F%61%74%3A%72%69%67%68%74%3B%20%20%6D%61%72%67%69%6E%2D%72%69%67%68%74%3A%33%35%70%78%3B%20%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%22%20%3E%50%6F%77%65%72%65%64%20%42%79%20%3C%61%20%73%74%79%6C%65%3D%22%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%20%63%6F%6C%6F%72%3A%23%39%39%39%39%39%39%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%65%6C%61%6A%61%72%2D%63%6F%64%65%2E%69%6E%66%6F%67%75%6E%61%2E%63%6F%6D%2F%22%3E%42%65%6C%61%6A%61%72%2D%63%6F%64%65%3C%2F%61%3E%20%61%6E%64%20%3C%61%20%73%74%79%6C%65%3D%22%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%30%70%78%3B%20%63%6F%6C%6F%72%3A%23%66%66%30%30%30%30%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%65%6C%61%6A%61%72%2D%63%6F%64%65%2E%69%6E%66%6F%67%75%6E%61%2E%63%6F%6D%2F%32%30%31%34%2F%31%30%2F%43%61%72%61%2D%6D%65%6D%62%75%61%74%2D%69%6B%6C%61%6E%2D%6D%65%6C%61%79%61%6E%67%2D%64%65%6E%67%61%6E%2D%68%74%6D%6C%2E%68%74%6D%6C%22%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%70%3E%3C%62%72%20%2F%3E%0A%3C%2F%64%69%76%3E%09' ) );
</script>

Dan Box iklan anda siap digunakan

Terima kasih telah membaca artikel tentang Cara Membuat Box Iklan Melayang dengan HTML di blog Belajar-Code jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Belajar-Code

Cara Membuat Box Iklan Melayang dengan HTML

Artikel terbaru :

1 comments :