Oleh : Bambang Jatmiko, S.Pd
Okey sobat langsung saja yaa.. kali ini saya akan coba menjelaskan bagaimana caranya untuk membuat iklan melayang atau bisa disebut pop-up di sebuah blog. oke langsung saja kita lihat contohnya di bawah ini, siapa tau masih ada yang belum paham apa itu iklan pop-up
perhatikan contoh iklan pop-up di bawah ini :
Ada 2 cara yang di gunakan : yaitu lewat widget HTML/Javascript atau langsung di dalam templatenya.
* Melalui Widget HTML/Javascript masuk ke blog sobat, lalu pilih tata letak kemudian sobat pilih tambah widget (terserah mau di header ataupun yang lainnya) lalu pilih edit, dan masukan source kode yang ada di bawah.
*Melalui edit HTML template langkah awal hampir sama seperti yang di atas. masuk ke template, lalu pilih edit HTML
Tekan Ctrl+F untuk menampilkan tools search di edit HTML lalu ketik </head> atau <body>, lalu masukan source code yang ada di bawah (di bawah </head> atau di atas <body>
Tekan Ctrl+F untuk menampilkan tools search di edit HTML lalu ketik </head> atau <body>, lalu masukan source code yang ada di bawah (di bawah </head> atau di atas <body>
*Ingat nyarinya di tools search yang ada di layar edit HTML bukan yang di atas sendiri.
Source Code:
<!– Start : Iklan Atas –>
<style>
#adstopbar {
height:25px;
cursor:move;
width:auto;
background: #005094 url(http://lh6.googleusercontent.com/-25yI9RdlTQM/TkWH5CaAh3I/AAAAAAAAAd4/tl00tzlBc80/s800/sidebar-h2.jpg);
background-repeat:repeat-x;
text-align:left;
box-shadow: inset 0 0 1px #fff;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius:4px 4px 0 0;
background-color:#005094;
}
#adsplace {
height:auto;
margin:0 auto;
width: auto;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:Center;
padding:2px;
}
#adspace {
opacity:1.0;
height:auto;
width:auto;
position: fixed;
top: 20%;
left: 40%;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:+99999;
font-size:13px;
}
</style>
<script>
$(document).ready(function() {
$("#adspace").draggable();
$("#adspace").show("clip");
$("#adsClose").click(function(){
$("#adspace").hide("explode");});
});
</script>
<div id=’adspace’ style=’display:none;’>
<div id=’adstopbar’>
<img align=’left’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbb4lAxEGNXUx1y8aUTokq6u0vLmUl4ShXGhmykogJ52L9weNG49W3LWlN3X4zdr5-Hu-CrDiTz6k2nsspmvfBMnMT3O2z9AHkgai5U33ww_0F8iIdHbZ_fcKFNrUneujE3BTPYgnrQgus/s1600/ads_1.png’ style=’width:24px;height:24px;padding-left:2px;’/><span style=’color:#fff;font-size:17px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;margin-left:5px;’>Sponsor</span> <span style=’color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:2px’>
<img height=’16px’ id=’adsClose’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJRRWQcQQM2lHln9YNzdal4NWv1gtc9SkXzyqJS7HF7kPRSOrLLRPEB58N1yRV3I79x6uJv7A-mLF6CMkDnZanwOeW5UEjxkZs-brs0V1MlhSkb6q5cW1nZn5_CsUD8Qpow8dm1Wg3y5-/s1600/close.gif’ style=’cursor:pointer;’ title=’Close’ width=’16px’/>
</span>
</div>
<div id=’adsplace’>
<!– Begin Ads –>
Kode Iklan Taruh Di sini Gan ☺
<!– End Ads –>
</div></div>
<!– End : Iklan Atas –>
okey..selamat mencoba yaa..mudah-mudahan bermanfaat.