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 are a great option to generate ad revenue, which is not possible only with static display ads.
If your blog receiving many returning visitors then you will notice, after a certain period of time, 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 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 don’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 gap by using 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 is a Floating Ad?
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 visitor 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 them.
Classier edition of floating ads come in 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 -
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 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 viewpoint AdSense user 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 at 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 instruction.
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 advertisement?
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 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: Log in to your AdSense account
Step #2: Click
Ads to expend vertical menu and click Ad unitsStep #3: Click
+ New ad unitStep #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 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>
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-
<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
- Replace "Ads code here" with your AdSense or others ads code.
- Change "160px" to increase or decrease wide
- Change "Left" with the right to float the right side of your blog.
1. How to Float 2 Wide Skyscraper Ad banner on the 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 is 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 that your ads must not overlap your content. So we recommend floating the ads at 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 visitors to click on it.
