Float AdSense And Display Ad Banner on Left or Right Side of Your Blog

A Step by step tutorial on how to float an AdSense and vertical display Ads to left or right within the blogger BlogSpot site?

Every blogger who uses Google AdSense or any other third-party advertising to monetize their blogs constantly seeks to increase the amount of time their readers are exposed to these advertisements while also increasing their income. 

Because floating ads automatically float as users scroll down, floating AdSense ads are a powerful and profitable approach to improve your advertising revenue. As a result, your visitors frequently click on your advertising and you can increase your Google AdSense revenue.

Are you also concerned about your present Ads network’s performance and ad revenue? 

A hidden truth is that -

Most publishers are not able to generate the projected amount of income from their present ad network. 

This is not the fault or incapability of your ad network rather you can make a handsome amount of money from your present ad network but you have to adopt a new strategy. 

The name of the new strategy is floating your ads to grab visitors’ attention and increase ad impressions and clicks. 

Floating ads are a great option to generate ad revenue, which is not possible only with static display ads. 

If your blog receives many returning visitors then you will notice, that after a certain period, most of the returning visitors become colour blind and don’t click on the ads banner. As a result, you are losing a significant amount of ad revenue every day. 

Floating ads can help a publisher boost CPM and CTR (Click-through-rate) and generate more income from any ads network

The mechanism of floating ads is effective when your blog or website doesn’t have enough empty space to monetize. 

Generally, we can see our blog’s left and right sides remain always vacant, which is known as idle space and we can easily utilize those gaps by using a floating ad placement system that can generate more clicks on AdSense ads.


How to float an AdSense Ad to left or right?

The biggest advantage of this method this will not occupy your valuable space within your blog content, sidebar and footer section. Moreover, Floating AdSense ads are a really smart technique to increase AdSense income. If you add floating AdSense ads it cans double your ad revenue. A special widget designed for floating AdSense and any other third-party Ads on the left side or right side of any Blogger Blog site.

In this tutorial, I have come up with a fantastic widget that will show you the way to use 

Floating "160px X 600Px"AdSense ads at the right or left side of your blog. 

Not only AdSense ads can float rather you can use this widget to float any display ad banner. Many bloggers monetize their blog with affiliate ads only and this widget can become an ideal option for them to display them as floating banner ads. 

What is a Floating Ad?

Floating ads are rich media Web advertisement that appears over the content of any webpage. Generally it ‘floats’ or ‘fly’ over the top of the page. 

Floating ads appear at the left or right side or middle position of the webpage and fade away after five to thirty seconds. Or visitors can close the ads by clicking on the close button. 

Usually, we see full screen, vertical and small rectangular floating ad banners. Many floating ads don’t include any close button, and visitors can’t escape without a click on them. 

Classier editions of floating ads come in many shapes and sizes along with sound, animation, and interactive mechanisms. 

Floating ads use a variety of technologies, such as: 

  • Flash animation and 
  • Dynamic HTML (DHTML)

According to the web browser, the compatible majority of floating ads can display in different ways. 

Benefits of Using Floating Ads?

Many publishers’ first choice is ‘Floating ads’ to grab the visitor’s attention and increase the click-through rate. They are willing to run floating ads on their website.

This is hard to generate more revenue only from viewable ad impressions of your ads network. The more you get to click the more revenue you can generate from the ads network. 

The benefits of Floating ads are as follows:

  • It ensures to get the maximum viewer's attention. 
  • Animated floating ads with sound give a feel like a TV commercial, as a result, it drives the visitors to watch them. 
  • Visitors cannot ignore the floating ads because it appears through full screen. 
  • Floating ads are more influential than non-floating display ads. 
  • Always it gets a high click-through rate. 
  • It can increase ad impressions. And many publishers generate $1 to $8 per 1,000 impressions. 
  • Ultimately it can generate higher ad revenue.

According to a HowStuffWorks -


A floating ad can generate 30 clicks per thousand impressions, which is much higher than the cited 3-6 clicks per thousand impressions from a banner advertisement.

Is it Allowable to Display Floating Ads in AdSense?

A question always pops to your mind that 

“Can I use AdSense ads in a float div on my blog?”

The simple answer is ‘No’

AdSense doesn’t allow appearing their ads in a “floating” or “sticky” position. Google AdSense is concerned about the user experience, for this reason, to ensure a secure and positive user experience they restrict the use of floating ad implementations. 

But AdSense has a Page-level ad feature that popup only on the mobile web. But still, it can’t generate estimated ad revenue. 

Should I Place Floating Adsense Ads on My Website?

After reviewing different viewpoints AdSense users shouldn’t use floating ads but if you can place them naturally then you can use floating ads safely. 

Google AdSense has several guidelines for placing ads. Such as 

  • You can’t try to grab unnatural attention to your AdSense ads.
  • You are now allowed to place the ads under a misleading header. 
  • You can’t cover the content by using ads. 

And so on

So if your floating ads don’t cover the content and grab the visitor’s attention unnaturally then you can place the floating ad banner. 

I have developed this floating ad banner to place the 2 vertical ads on the left and right sides of any website. And this will not grab the user’s attention but maximize the ad revenue. Publishers can easily underutilise places to display ads and increase ad revenue. 

But this widget helps to float any ad banner from any ads network. So if you are not using Google AdSense, then this floating ads widget will become useful to maximize your ad revenue. 

How To Add Floating AdSense ads to the left or right side On Blogger?

This is really an excellent technique to float your display ads on the left or right side of your Blogger BlogSpot. 

All Ads network has unique terms and conditions to use their display ad banner. And all publishers must follow their instructions. 

So before proceeding please read carefully about your present ads network’s Terms of Service. If you are intended to use Affiliates ads then read the Terms of use of the respective affiliate network. Many of them allow floating ads and some are not allow floating advertisements.

I have split this tutorial into 2 parts. First, you have to get the AdSense ad script from your AdSense account and later we will show you the floating ad script to integrate the AdSense code. 

How to Get the AdSense Code?

You can utilize any ad script but for example purposes, I am showing the tutorial with Google AdSense.

To get the responsive AdSense ad code just follow the below steps:


Step #1: Log in to your AdSense account

Step #2: Click Ads to expand the vertical menu and click Ad units

Step #3: Click + New ad unit

Step #4: Select Text & display ads

Step #5: Now give the name of your Text & display ads and select Responsive ad unit.

Step #6: Finally click Save and get code button to get the AdSense ads code.

Step #7: Simply copy the ad code in a notepad and click the Close button to close the ad code window. 

You have successfully generated a responsive AdSense ad code and later on, we will use it in your floating ad widget to display floating ads in your blog. Your generated ad code will look like the below:


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Text & display ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8888888888888888"
     data-ad-slot="3333333333"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Now we will advance to the second part of the tutorial. 

How to Integrate AdSense Ads with Floating Ad Widget? 

This is the main part of the tutorial. Here we will show you the total integration process of your generated AdSense code with the Floating ad widget. Please follow the below steps-


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 into the "HTML/JavaScript" Gadget.

<style>
#bloggerspicesflotads {
height:30px;
width:auto;
background: #333333 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#bsadsbase{
height:600;
margin:0auto;
width:160px;
background:#fff;
border-bottom:2px #333333 solid;
border-right:2px #333333 solid;
border-left:2px #333333 solid;
text-align:center;
padding:4px;
}
#bsadsheadline{
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
</script>
<div id="bsadsheadline">
<div id="bloggerspicesflotads">
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.bloggerspice.com/2013/05/how-to-float-adsense-and-other-third-party-ads-on-left-or-right-side-of-the-blogger-template.html" target="_blank" onclick="getValue()">close(x)</a></span>
</div>
<div id="bsadsbase">
<h3></h3>
<p align="left"><h3></h3></p>
<p>                                                                                                                           
Ads code here
<br/></p></div></div>

Step #5: Now click the "Save arrangement" button from the top right corner.

Customization

  • Replace "Ads code here" with your AdSense or other ads code.
  • Change "160px" to increase or decrease wide
  • Change "Left" with the right to float the right side of your blog.

Wrap it up 

Floating ads are a good option to make more money from your blog or website. It gives more control over ad placement because you can float or fly anywhere on your webpage. 

However, you should take some precautions so that your ads must not overlap your content. So we recommend floating the ads on the left and right sides of your website. 

Most of the website’s width is 1100 px to 1200 px as a result you will see plenty of empty white space. You can utilize those spaces by using this great floating ads widget. 

Obviously, this widget will increase your ad revenue dramatically because this floating widget will easily attract visitors to click on it.

Go Up