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

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.

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: 

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:

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 

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:

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>

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-

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

Customization