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

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

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() {
</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:5%;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:5%;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 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/>


  • 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 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.
Shibam Kar says: 5/11/2016

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

Shibam Kar says: 5/11/2016

Hoeche vai top e show korate perechi. Thanks.

BloggerSpice says: ADMIN 5/11/2016

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

Shibam Kar says: 5/11/2016

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

BloggerSpice says: ADMIN 5/11/2016

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

Anonymous 5/11/2016

not working code error

BloggerSpice says: ADMIN 5/12/2016

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

Unknown says: 5/12/2016

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

BloggerSpice says: ADMIN 5/13/2016

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

Jasa Mural says: 8/03/2016

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

Anonymous 8/29/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?

BloggerSpice says: ADMIN 8/30/2016

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.

BloggerSpice says: ADMIN 8/30/2016

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

weriton says: 11/16/2016

como faço para que o anuncio seja fechado quando visitante clicar no banner

BloggerSpice says: ADMIN 11/16/2016

Oi Wo Tutoriais

Eu já adicionei botão de fechamento de anúncio. Você vai encontrar no canto superior esquerdo e canto superior direito do banner do anúncio.

Obrigado. :)

Unknown says: 12/04/2016

Thank you.

Anonymous 1/05/2017

It has work fine since months in computers but this week I discovered that with smartphones it says "(index):262Uncaught TypeError: $ is not a function at (index):262". At that line the code is "$(document).ready(function() {". I don't know why but it doesn`t accepts "$" before (document)... line.
It remains refreshing the web page in sdmartphones because of that error.
Someone to help me?

BloggerSpice says: ADMIN 1/06/2017

Simply hide the ad on mobile device. You have to add a simple code in responsive ad section.

Just add below code...


banner ad design says: 2/01/2017

banner ad design, targeting and managing is more important than any things. You wrote the exact point, Thanks!

BloggerSpice says: ADMIN 2/01/2017

Thanks for your honest feedback. Viewers always attract by viewing the eye-catching banner design. :up

hammerofthorjakarta com says: 5/29/2017

very amazing post, I like It, Thank you for presenting a wide variety of information that is very interesting to see in this artikle, good job adnd succes For you

RAM says: 9/05/2017

Floating ads are displaying in mobile version too

How to hide or stop in mobile version

category9 says: 10/09/2018

It's very nice of you to deliver your extensive knowledge here! I really liked reading this text. Thanks for sharing!

BloggerSpice says: ADMIN 10/17/2018

You are most welcome Bro. Thanks for dropping your comment. :sl

#31# says: 10/25/2018

Nice code guys, but why if I press X add doesnt close but it goes on your site??

#31# says: 10/25/2018

Great job guys but why when i press X to close X, it redirects to your site?

Bdallpost says: 10/27/2018

nijar add dita parbo?

BloggerSpice says: ADMIN 10/28/2018

Hi :)
Yes. You have to design your ad with Photoshop and upload it in any photo hosting site like Blogger, photobucket etc. Then use it.

BloggerSpice says: ADMIN 10/28/2018

Hi There
Yes i have added this feature for promotion purpose. If other user wants to use it then they can find this code easily. However it doesn't divert from your site. It will open in other window.

Dr.Future says: 11/09/2018

thank you very much
i spent a lot time to find code like this
it is working fine and i made some adjustments on the code
check the ad here and tell me your opinion>>

Unknown says: 1/10/2019

How can I place this ads to wordpress site?

Contact Form


Email *

Message *