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

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

A hidden truth is that -

Most of the 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 visitor’s attention, increase ad impression and more click. 

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

If your blog receiving many returning visitors then you will notice, after a certain period of time most of the returning visitors become color blind and they don’t click on ads banner. As a result, you are losing a significant amount of ads 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 side remains 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 click on AdSense ads.

The biggest advantage of this method this will not occupy your valuable space within your blog content, sidebar and footer section. 

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 be 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 are Floating Ads?

Floating ads are rich media Web advertisement that appears over the content of any webpage. Generally it ‘float’ 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 banner. Many floating ads don’t include any close button, and visitors can’t escape without a click on it. 

Classier edition of floating ads come with many shape and size along with sound, animation, and interactive mechanism. 

Floating ads use a variety of technologies, such as: 

• Flash animation and 
• Dynamic HTML (DHTML)

According to the web browser, compatibility majority of floating ads have the ability to 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 gives 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 in 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 concern 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 it 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 side of any website. And this will not grab the user’s attention but maximize the ad revenue. Publishers can easily underutilized 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 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 ads script but for example purpose, I am showing the tutorial with Google AdSense.

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

Step #1: Login to your AdSense account

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

Step #3: Click + New ad unit

Step #4: Select Text & display ads


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


Step #6: Finally click the "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 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 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 in 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 right side of your blog.

Do you want to Float Dual AdSense and other Ads on the left and right side in your Blogger site at a time? Then Please Grab my other tutorials.
1. How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
2. Float 300px X 250px Advertisement Middle of Blogger Site
3. Add 2 in 1 Floating Facebook and Advertise widget in Blog Site

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 of your webpage. 

However, you should take some precautions that your ads must not overlap your content. So we recommend floating the ads on the left and right side 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 the visitors to click on it.