Did you wanted to add an AdSense Ad Unit that would scroll down with the page as you move down but only after once you move down a certain distance from the top of the page (Sticky Adsense Ads).
This technique would help maximize your AdSense revenue as you would be able to provide your AdSense unit maximum impressions and exposure. Though there are other techniques to make the sidebar widgets position: fixed but that has many limitations.
adsense scrolling widgetSo for today, lets see how can you make an AdSense unit scroll with the page once you move down a particular distance from top of the page. We have to wrap up the AdSense unit in a div with position absolute. A JavaScript in the background keeps the check of the distance moved from top of the page. We fix the position of the AdSense unit in accordance with the pixels from top of the page.
So once the scrolling is down up till that level, a div is implemented on the Ad unit that has a position absolute.
Pretty interesting?
So lets a startup and apply this auto-scrolling effect to a widget (AdSense Unit in this case). For the purpose of the tutorial, I would consider that you already know how to create AdSense Ad units and you would have a code for an Ad that would be used in the code.
Step #1 Add The Following Codes To HTML/JavaScript
Go to Blogger >> Design >> Add a Gadget >> HTML/JavaScript and paste the following code in it. Ill explain the working and customization in a bit.
<div id='BeH-Fixed'>
Your AdSense Code Here
<p style=" line-height:0px; font-size:6px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.bloggingehow">Get Scroll Effect</a></p>
</div>
<script>
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('BeH-Fixed'),
scroll = getScrollTop();
if (scroll <= 2500) {
box.style.top = "2510px";
}
else {
box.style.top = (scroll + 10) + "px";
}
};
}
</script>
<style>
#BeH-Fixed {
position: absolute;
z-index:9999;
}
</style>
Step #2 Get To Know The Background
Now notice in the code above that we have 3 different sections of the code. One of the div (actual HTML code) that implements the Ad Unit. First part of the code is as shown below, Your AdSense Code Here
Now the very next part is the JavaScript for the code to work. This is the backbone of the entire working of the process and needs to be handled intelligently/common sense.
<script>
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('BeH-Fixed'),
scroll = getScrollTop();
if (scroll <= 2500) {
box.style.top = "2510px";
}
else {
box.style.top = (scroll + 10) + "px";
}
};
}
</script>
And the third part is the CSS section that declares a div section with a position absolute.
<style>
#BeH-Fixed {
position: absolute;
z-index:9999;
}
</style>
What You Need To Do?
Now once you know the parts of the code above, you have to make a few changes to the JavaScript part where you have to play with 3 different values that would determine 3 different things.
1- The Distance between the AdSense Unit and the top of the page. The code below is responsible for the.
box.style.top = "2510px";
2- The distance page have to scroll after which the position of the Ad Unit will be made absolute (fixed, and would start scrolling with the page). Below code is responsible for that.
scroll <= 2500
3- To make the scrolling smooth, it is recommend to make the third value below equals the difference between the above two values.
scroll + 10
So notice, 2510- 2500 =10.
Though it is not compulsory but you would notice a slight jerk in the scrolling once the page moves to that certain distance from the top.
So in the case above, lets consider that you would make no changes to the code and would implement is as it is. So your AdSense unit would be fixed 2510 pixels below the top of the page, plus it would start scrolling down once the page pasts that 2500 distance from the top.
So once the scrolling would start, you Ad Unit would be 10 pixels away from the top of the page always. The below picture represents the moment when the scrolling starts.
What Do You Think?
In case of any problem that you would face, don't forget to leave out your comment below and I would get back to your guys as soon as possible.