Scrolling AdSense Ad After Moving Down a Certain Distance From Top

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 top of the page. 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.

scrolling adsense ad




You may like to read:



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.

You may like to read:


Pretty interesting haan? smile

So lets start up 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.

For references, you may like to read:


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>

You may like to read:


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,

<div id='BeH-Fixed'>

Your AdSense Code Here

</div>

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 position absolute.

<style>
#BeH-Fixed {

  position: absolute;
  z-index:9999;
}
</style>

You may like to read:


What You Need To Do?

Now once you know the parts of the code above, you have to make 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.

scroll adsense unit

What Do You Think?


In case of any problem that you would face, dont forget to leave out your comment below and i would get back to your guys as soon as possible.

Now you may like to read:


Cheers buddies smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Scrolling AdSense Ad After Moving Down a Certain Distance From Top
Scrolling AdSense Ad After Moving Down a Certain Distance From Top
http://1.bp.blogspot.com/-e045DUwvj5E/UfMz3bnjvVI/AAAAAAAALbA/05e8uYhglAk/s1600/scrolling+adsense.png
http://1.bp.blogspot.com/-e045DUwvj5E/UfMz3bnjvVI/AAAAAAAALbA/05e8uYhglAk/s72-c/scrolling+adsense.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/06/scrolling-adsense-ad-after-moving-down.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/06/scrolling-adsense-ad-after-moving-down.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade