How to Float 2 Wide Skyscraper AdSense Ad banner on Left and Right Side?

Floating Ads is very effective for that website that wants to make their site Ads friendly. Even you will able to save your space from your website by using floating ads. 

For example, you want to display the Wide Skyscraper Ads banner on the right sidebar then it will occupy 160px X 600px space, where you can add others widgets. But if you just float that Wide Skyscraper Ads banner then you would able to display that after the right sidebar. So you can utilize all space on your website.

If you are using a Blogger template with a right sidebar but you want to display ads on the left side then you must use floating or hovering ads on your site, because without a widget container you won’t able to add a Wide Skyscraper Ad banner.

This will not only help us to save our website space but also helps to increase ads revenue rapidly. For generating more ad revenue you must place the ad above the fold. And this widget will help you to place your advertisement above the fold. And it will obviously increase your ad revenue. So let’s see how we can add this widget to our Blogger site.

How to add Floating Wide Skyscraper AdSense Ad banner Widget on the Left and Right Side?

To add the widget please follow the below steps: 

Step 1: Log in to your Blogger account and Go to your Blogger Dashboard

Step 2: Go to your Layout tab.

Step 3: Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4: Now Copy the below code and paste it into the "HTML/JavaScript" Gadget.

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script><br />
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script><br />


<!--start: floating ads http://www.bloggerspice.com/--><br/>
<div id="leftads" style="width:160px; height:600px; text-align:left; position:fixed; z-index:1001; bottom:5%;left:1%;">
<div>
<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-right:10px"><a href="http://www.bloggerspice.com/2016/05/float-vertical-ad-banner-in-blogger-site.html" target="_blank" onclick="document.getElementById('leftads').style.display = 'none';">[x]</a>
</a>
</div>

<!--Start Left Ad -->
Add you Ad Code Here
<!--End of Left Ad -->
</div>


<div id="rightads" style="width:160px; height:600px; text-align:right; display:scroll;position:fixed; z-index:1001; bottom:5%;right:1%;">
<div>

<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-left:10px"><a href="http://www.bloggerspice.com/2016/05/float-vertical-ad-banner-in-blogger-site.html" target="_blank" onclick="document.getElementById('rightads').style.display = 'none';">[x]</a>
</a>
</div>
<!--Start Right Ad-->
Add you Ad Code Here
<!--End of Right Ad -->
</div>

Step 5: Finally Click on the Save button.

Now check your Blogger site and see 2 ad banner appeared on the left and right side of your Blogger template.

How to add a Personal Ad Banner on the Widget?

• Replace Alt Text with your advertisement name.
• Replace Ad URL with ads destination URL.
• Replace Banner Image URL with your ad banner image.
• Alter 160px and 600px for adjusting the height and width of the widget.

And simply add the ad and save it. You will see your ad banner is displaying. I hope this widget will help to solve your ad placement solution. If you need any help then feel free to leave a comment below.