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.

Comments: 23
data:blog.title
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() {
$('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:1%;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:1%;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 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/>

Customization

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

Speak Your Mind

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

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

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 jasamural.com sebagai jasa lukis ^_^. Moga makin tambah rejekinya ia Om

Anonymous 8/30/2016

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?

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}

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;

use

width:10%; height:60%;

adjust the value according to your website height. :ey

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

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

Anonymous 1/06/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?

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}

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

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

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

Floating ads are displaying in mobile version too

How to hide or stop in mobile version

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *