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 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.

You can follow another tutorial if you wish to Float single AdSense and other Ads on the left or right side of your Blogger site


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

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.

Live Demo

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 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>
To customize the widget please replace Add Your 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 a Personal Ad Banner on the Widget?

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/>

To customize the widget please follow the below instructions:
  • 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.

You may like these posts

32 Comments

  1. Shibam Kar
    ebar perfect hoeche. but eta niche show na kore upore show korte chai. ki custopization korte hobe ?
  2. Shibam Kar
    Hoeche vai top e show korate perechi. Thanks.
    • BloggerSpice
      hmm.. Yes! Good to hear that... :up
  3. Shibam Kar
    Vai blogger blog e text uncopiable korbo kivabe ? help please...
    • BloggerSpice
      Hi Shibam.I have already answered in previous post's comment section :gt ..Please follow the tutorials from Below URLs

      http://www.bloggerspice.com/2016/01/how-to-Protect-your-Website-by-Disabling-page-source-view.html

      http://www.bloggerspice.com/2013/07/2-ways-stop-thieves-copying-your-blog.html
  4. not working code error
    • BloggerSpice
      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
  5. Unknown
    not showing personal image
    just showing the address of that image not an image
    • BloggerSpice
      Sorry custom Banner script was missing. I just added it at the end of the content. Now use that to display custom banner ads. :)
  6. makasih om, salam kenal ijin komentar pertama saya disini oleh jasamural.com sebagai jasa lukis ^_^. Moga makin tambah rejekinya ia Om
  7. Hello,

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


      #rightads{display:none}
      #leftads{display:none}

  8. weriton
    como faço para que o anuncio seja fechado quando visitante clicar no banner
    • BloggerSpice
      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. :)
  9. Unknown
    Thank you.
  10. 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
      Simply hide the ad on mobile device. You have to add a simple code in responsive ad section.

      Just add below code...

      .leftads{display:none}
  11. banner ad design, targeting and managing is more important than any things. You wrote the exact point, Thanks!
    • BloggerSpice
      Thanks for your honest feedback. Viewers always attract by viewing the eye-catching banner design. :up
  12. hammerofthorjakarta com
    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
  13. RAM
    Floating ads are displaying in mobile version too

    How to hide or stop in mobile version
  14. It's very nice of you to deliver your extensive knowledge here! I really liked reading this text. Thanks for sharing!
    • BloggerSpice
      You are most welcome Bro. Thanks for dropping your comment. :sl
  15. #31#
    Nice code guys, but why if I press X add doesnt close but it goes on your site??
  16. #31#
    Great job guys but why when i press X to close X, it redirects to your site?
    • BloggerSpice
      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.
  17. Bdallpost
    nijar add dita parbo?
    • BloggerSpice
      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.
  18. Dr.Future
    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>> http://micloudfiles.com/nnwan089rmwp
  19. Unknown
    How can I place this ads to wordpress site?
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up