How to Create a Floating Pop-up Ad for Your Blog

Ruangngoprek.web.id - How to Create Floating Pop-up Ads on a Blog , this time I will try to explain how to create floating ads or what can be called pop-ups on a blog. Okay, let's just look at the example below, who knows there are still those who don't understand what pop-up ads are.

Through the HTML/Javascript Widget, enter your blog, then select the layout then select add widget (it's up to you whether you want it in the header or others) then select edit, and enter the source code below.

<!-- 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/AVvXsEhkPc0qXDRqRKclAxG4yeX26Ye4eQ9J4qCoIlCGK0QQfF-qV-oKz1M8uzGFzSUcnGSimVTMRcKYZQGAmvHqPpfyzU5Gqp0C1dUFHXwTbuEoZ18tK5KorO4IdyrgWa0htA-ocsSQqHKYEQU2/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/AVvXsEjQVPOIDJ8L-GBBw0gK3OB3i2OoZslBh8b5vEheC04IA841k8xaeZC6-abc6JvyXOsAwKEnOK1nvF72fWvw-IwpfOFO5-KwgNdv2X87cUiQ7Os-_vR0IEda7hF2Fe8yZJpDz3RWIiEUBLVJ/s1600/close.gif' style='cursor:pointer;' title='Close' width='16px'/> <!-- End : Top Ad --></div></div><!-- End Ads -->Put the Ad Code Here, Bro<!-- Begin Ads --><div id='adsplace'></div>
</span>

The second way is through editing the HTML template, the initial steps are almost the same as above. Enter the template, then select edit HTML Press Ctrl + F to display the search tools in edit HTML then type </head> or <body>, then enter the source code below (below </head> or above <body>

click save.

That's the article on  How to Make Floating Pop-up Ads on a Blog , Hopefully useful.