Selamat datang kembali agan/sist, kali ini saya akan 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 :D
 |
Gimana gan? udah tau kan hehe..
Okeh ga usah banyak bacot, langsung saja simak langkah-langkahnya di bawah ini:
Ada 2 cara, yaitu lewat widget HTML/Javascript atau langsung di dalam templatenya.
* Melalui Widget HTML/Javascript
- Masuk ke blog agan, lalu pilih tata letak
- Lalu agan pilih tambah widget (terserah mau di header ataupun yang lainnya)
- Lalu pilih edit, dan masukan source kode yang di bawah.
- Langkah awal hampi 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>
- Ingat nyarinya di tools search yang ada di layar edit HTML bukan yang di atas sendiri.
<!-- 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/AVvXsEjs42bAR9dyiW8xP7HAJpNXcNrPGpXetDU1BfupGs8Yjo0-1DekyF1W8n-h0fkr-f5toEIy615JbkwiqW0uS8Mab0T7w9ZIlibgcM7czr4ssgsZ_1cbjgXuVnhDGz6BRheVuKmVtri5zKaH/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/AVvXsEii7dbK6YhCrFA6EInix7aD2pekqZf6ZtrCWV9CmxSPpiVNah1rx3bfAgqsU_U0u3HBU0XCSue8I6cqV4z3id4e8_DfEO95dOWRREW6GtAJC3p62HsKokIDK2TjNLwMLecOf1Yud_E3PhHW/s1600/close.gif' style='cursor:pointer;' title='Close' width='16px'/>
</span>
</div>
<div id='adsplace'>
<!-- Begin Ads -->
<!-- End Ads -->
</div></div>
<!-- End : Iklan Atas -->
Gimana agan-agan semua? mudah kan.
Mungkin itu dulu dari saya... Semoga bermanfaat :D
0 comments:
Post a Comment