Create Floating Ad Space outside Current Theme of a Website

Did you ever wanted to display floating ads on your website? Well, I did. I search over the internet for few hours to find a pre-written code, but had no luck. Finally I coded it myself. In this post, I’m going to share my code hoping it’ll be useful for someone in the future.

So the idea is to display couple of ads on each side of the website which will float down when user scrolls down the webpage. And float up automatically when user scrolls up the webpage. These ad positions will be completely separated from the current template of the website and will follow the visitor within the webpage.

These ads will bring spammy look to your webpage and most people will hate it. It’s not recommended to use it on a business site or a personal blog. But there are some sites you can use this code for. For example, I use this code on an image hosting site where I don’t have anything valuable to offer other than some movie screenshots. Most visitors visiting the site will never come back, even if they do, I don’t care. But if want to keep your site clean and user-friendly do not use this.

With that being said, let’s check out the code. We’ll actually need two codes to do this, first one goes in to your theme’s style sheet and the other one goes in to header (Usually header.php). Let’s look at CSS part first, Open your themes style.css file with text editor and add this code to it.

[css]/* Begin Floating Ads Style */
#float-left {
position:fixed;
top: 5px;
left: 10px;
bottom: 5px;
width: 160px;
height: 768px;
margin-bottom:15px;
border-bottom: solid #000000;
padding: 5px 0 5px 0;
}

#float-right {
position:fixed;
top: 5px;
right:10px;
bottom: 5px;
float:right;
width: 160px;
height: 768px;
margin-bottom:15px;
border-bottom: solid #000000;
padding: 5px 0 5px 0;
}
/* End Floating Ads Style */[/css]

This code will add necessary styling to our ads. If there’s no ad, nothing will be displayed. You can define size of your banner by editing values for width and height in the above code.

Next we’ll need to add little code to themes header, right after closing of the head tag. So open your header.php and find below code within it.

[html]</head>[/html]

And paste following code right after it,

[html]<div id="float-left">
Your Ad Code Here
</div>
<div id="float-right">
Your Ad Code Here
</div>[/html]

Replace ‘Your Ad Code Here’ with your ad code. Now save file and open webpage in your browser and you’ll see magic.

Feel free to play with the code. Change the CSS positioning as you need. If you don’t know what CSS positioning is, just ask Google. There are hundreds of pages explaining it.