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

Floating Ads is very effective for that website who 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 Wide Skyscraper Ads banner on the right sidebar then it will occupy 160px X 600px space, where you can add other 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.

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

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

Do you want to Float single AdSense and other Ads on the left or right side in your Blogger site?
Float AdSense and other Ads on left or right side of your Blog

This will not only help us to save our website space but also helps to increase ad 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.

Video Tutorial of this Widget. 
Live Demo


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 in "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>

Customization

  • Please replace Add you Ad Code Here with your Ad’s code.

Step 5 Finally Click on the Save button.


floating ad banner

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

How to add Personal Ad banner?

If you wish to add a personal banner image then you can use the below code. Just follow the steps from above and Please replace "Add you Ad Code Here" with the below code.

<a title="Alt Text" href="Ad URL" target="_blank"><img alt="Alt Text" src="Banner Image URL" width="160px" height="600px"/></a><br/>

Customization

  • Replace Alt Text with your advertisement name.
  • Replace Ad URLwith ads destination URL.
  • Replace Banner Image URL with your ad banner image.
  • Alter 160pxand 600px for adjusting the height and the 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.

No comments: