Did you ever notice the whitespace in websites when seen on monitors with bigger screen resolutions, this could be used to target visitors coming to your site and promote content or promote affiliate links visible only for them and make use of such screen estate.In this tutorial I’ll show how to to place content / ads in the free space available when browsing a site from a widescreen monitor.For Ex. in the screenshot you can see that there is free space available for use on both sides of the content area.
Also Checkout :
Here are the steps :
The CSS : Place this CSS Code in your style.css file
position: absolute; /* fixed - scrolls down, absolute - does not scroll down */
/*margin:0 auto;*/ /* Uncomment If You Want To Scroll Adunit / Content Area */
/*margin-left:1150px;*/ /* Uncomment and adjust value to place unit on right side */
Next, Replace the <body> With these lines of code :
<body onresize="tellsize()" onload="tellsize()">
<!— Palce Ad Code Here –-> </div> </div>
End Result :
- Make sure that the ad-size matches with the Width and Height mentioned in the CSS File.
- If you want the ad to float, then set position : fixed and set margin: 0 auto. These are already in the code, just uncomment in the CSS Code
- If you want to have the adspace to the right side, uncomment margin-left and adjust the margin-left values.
- Do Cross Check If this method breaks any Terms Of Your Ad-Serving Company, because it might be against to float ads.
- Conditionally hiding content might be bad SEO, cross check the implications of this method before implementing this on your primary sites.
- This can also be implemented on any site, and not only WordPress.