Display floating ads in left or right sidebar of desktop website

Floating Sidebar Ad
Simple script will give power to show floating non scrollable ads in the left or right side of your website or blog to show ads continously

Script will give you a power to add floating ads into your website or blog even if your website is scrolled down or moved up. If you are using laptop or computer with bigger width, you might see the blank space at both side of this website.

This blank space is used by adding floating ads in right and left side of webpage.

#1 Floating ad in left side:

To add floating ads in left side of your website or blog, you must first make sure that no links are getting hidden under these ads.

Now, you have to add some script to your CSS file which can be used any where in your webpage.

Add following script at bottom of your Style sheet file

To make you ad movable in vertical direction up and down increase and decrease pixel size.Like

  • top: 10px; moves your ad 10 pixels downwards
  • top: -10px; moves your ad 10 pixels upward.
Related:  Add floating ads in high end smartphone browsers

After adding the this script to your CSS file now add other script into your home page or any page you want floating ads.

#2 Floating ad in right side:

Similar to left float ad you can add following code to CSS file

and to home page index file show floating ads on you blog or web page.

#3 Adding directly into body:

If you don’t have permission to modify CSS file then you can directly add below code into web page between <body> tag:

Related:  How to Remove Ads in Applications on Android Without Root

#4 For Blogger users:

As the blogger, doesn’t have CSS file to add the code. They need to directly add in Template HTML editor. Below code snippet can be useful for blogspot users. (Make sure that you add the code before end of body tag).

#5 Floating ad in Mobile device:

You can even use floating top or bottom ads in your high-end mobile device with adding few tweaking codes to your theme file. These ads will only show up in the mobile screen for laptops and other it will disappear and shows regular ads.

You may also like...

5 Responses

  1. David says:

    This isn’t working. Using Squarespace, I inject this into page header:

    #RightFloatAds {
    right: 0px;
    position: fixed;
    text-align: center;
    top: 0px;

    my google adsense code

    Nothing happens.

    • David says:

      Sorry, not everything comes up in the comments

      #RightFloatAds {
      right: 0px;
      position: fixed;
      text-align: center;
      top: 0px;
      } / style

      div id=”RightFloatAds” my google adsense code /div

      I removed the “”

  2. Julian says:

    Hi, this is a good tip, but please be aware this this is against Google Adsense TOS… in case you use it to make the ad visible all the time.

  3. Doug says:

    For me…It’s not about affiliates it’s about advertising my own product.

    Thank you for this article. It is the only one I’ve actually found that didn’t involve a plugin of some sort and none of them looked too promising anyways. This makes it simple to put in a graphic of my own.

    One question…How would I put a link behind the image? I’m sure I’ll figure it out but it’d be a nice add to this post. Good Job!

  4. Mecra says:

    please help for blogger :(
    I need right CSS code. For example # is not a valid code in blogger css.

Leave a Reply

Your email address will not be published. Required fields are marked *