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

Ad banner widget that designed for floating or hovering Wide Skyscraper or Vertical Ad banner on both left and right side of any Blogger template at a time.

How to Float 2 Wide Skyscraper 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 right side bar 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 the all space on your website.

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 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 it 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 in our Blogger site.

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() {
</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><br/>
<div id="leftads" style="width:160px; height:600px; text-align:left; position:fixed; z-index:1001; bottom:1%;left:1%;">
<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="" target="_blank" onclick="document.getElementById('leftads').style.display = 'none';">[x]</a>

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

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

<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="" target="_blank" onclick="document.getElementById('rightads').style.display = 'none';">[x]</a>
<!--Start Right Ad-->
Add you Ad Code Here
<!--End of Right Ad -->


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

Step 5 Finally Click on Save button.

floating ad banner

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

How to add Personal Ad banner?

If you wish to add 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 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/>


  • 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.
How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
4 Stars stars - "How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?" Floating Ads is very effective for that website who wants to make their site Ads friendly. Even...

Post a Comment

ebar perfect hoeche. but eta niche show na kore upore show korte chai. ki custopization korte hobe ?

Hoeche vai top e show korate perechi. Thanks.

hmm.. Yes! Good to hear that... :up

Vai blogger blog e text uncopiable korbo kivabe ? help please...

Hi Shibam.I have already answered in previous post's comment section :gt ..Please follow the tutorials from Below URLs

not working code error

Hi Gihan..Code error may appeared from your Ads not from the widget. Please don't modify the widget code. And just replace "Add you Ad Code Here" text with your ad code. It will work 100%. You can check it in Demo. :go

not showing personal image
just showing the address of that image not an image

Sorry custom Banner script was missing. I just added it at the end of the content. Now use that to display custom banner ads. :)

makasih om, salam kenal ijin komentar pertama saya disini oleh sebagai jasa lukis ^_^. Moga makin tambah rejekinya ia Om

Anonymous 8/30/2016


I am having a problem with this code on lower resolutions (bellow 1366x768) it is not fixed on site edges but cover the site spaces (not responsive). I need to fix it so that site area stay clean and banner to be shown on site edge only.

Can you pls help mw with this?

Hi there, You can adjust the height and weight by changing the value like below.

width:160px; height:600px;

And please add the below script under your responsive code area. This will hide the ads on Smart devices. :wr


Anonymous 8/30/2016

Hi, i understand what you are saying but how to make banner auto ajust to different resolutions? If i change h/w it won't be 160x600 sidescraper add.

In this case you can use percentage like instead of width:160px; height:600px;


width:10%; height:60%;

adjust the value according to your website height. :ey

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *