Cara Membuat Penampil Iklan PopUp

Optimalkan google adsense atau ads (iklan) dari sponsor anda dengan memasang PopUp Ads Screen yang user-freindly. Memang terkadang kita tidak terlalu suka dengan penampilan iklan yang berlebihan pada blog yang kita kunjungi, selain menggangu penampilan blog terkadang juga membuat waktu loading yang bertambah lama. Oleh sebab itu saya mencoba membuat PopUp Ads Screen yang user-friendly, ga terlalu banyak iklan yang menggangu tapi bisa memperlihatkan secara fokus info dari sponsor kepada pengunjung blog... Dengan memasang PopUp Ads Screen ini selain memberikan informasi tambahan dari sponsor blog, pengunjung juga bisa memberikan support kepada blog yang dikunjunginya dengan mengklik dan melihat iklan yang terpasang pada blog tersebut.

PopUp Ads Screen menggunakan kode css dan sedikit sentuhan kode HTML. Buat anda yang tertarik dengan PopUp Ads Screen ala MonosBit ini silakan disimak tutorialnya...untuk contoh seperti yang terlihat pada popup iklan di blog monosbit ini.

Cara Pemasangan

Login » blogger.
Rancangan » Edit HTML.
Klik Ctrl+F dan cari kode berikut: </Head>. Anda juga bisa menaruh kode script di kotak gadget untuk mempermudah pemasangan.

Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js' type='text/javascript'></script>

Copy-Paste kode di bawah ini tepat di bawah Kode <Body>.

<!-- 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/AVvXsEjsMXDymHvO_5cQ1cKZ4_nZllPc2miUDiOMHf9bp3q80vrBghyRRNfM1DZR4o5eAilh-webXvWpiZdaiKW0grGnhzqYzWAhXpwMSoDhYL46Zm9Yi0Ps8TsltxZFy0qfCW0Sn4YPyn25OvvQ/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 id='adsClose' title="Close" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMmr3suUgU-I4kvmOio1IoQsae7L1fJsdv-X1dLbji16bfpV2vikFEWzA9rOkz0mbVxfmHKWwcW9U6cdRE4FGLA5AfhF0sCqL_IHJTso-kRylE6Ybpaxf2DmmUamyUOS-ao2P1bLlV-Htj/s1600/close.gif' width="16px" height="16px" style="cursor:pointer;"/>
</span>
</div>
<div id='adsplace'>
<!-- Begin Ads -->
PASANG KODE ANDA DISINI !!!
<!-- End Ads -->
</div></div>
<!-- End : Iklan Atas -->

Keterangan :
Perhatikan tulisan PASANG KODE ANDA DISINI !!! yang berfungsi untuk menaruh kode iklan anda yang didapatkan dari situs penyedia iklan yang anda pilih atau kode HTML/Javascript yang anda kembangkan sendiri...
Klik "Save" dan lihat hasilnya

Semoga postingan artikel kali ini dapat memberikan manfaat untuk anda. Oke... selamat mencoba dan jangan lupa komentarnya yaa supaya info berikutnya lebih kreatif dan bermanfaat.

Cara Membuat Penampil Iklan PopUp

0 Response to "Cara Membuat Penampil Iklan PopUp"

Post a Comment

Popular Post