Hey Bloggers! Are you wanting to add a Responsive Sticky Ads on Bottom in Blogger website and boost revenue? Then this article will very useful for you.
But! before doing that, you need to know the basics of what is
sticky ads, different types of sticky ads, the benefits of sticky AdSense ads, and
what are the guidelines given by the Google Adsense team for proper
implementation of these Sticky ads in Blogger.
What is a sticky Ad?
A sticky ad is an ad unit that stays visible on the page
while the user scrolls through the content of your page. When you implement it properly, sticky ads can provide a better user experience than non-sticky ads,
since sticky ads simply stay in the same place in the viewport.
Types of Sticky Ads
Sticky ads are a fixed/ persistent ad that stays visible in
the viewport as the user scrolls the content of the page up or down. This is an
implementation done by the publisher, You could use in your Blogger Blog
JavaScript to make a fixed position div). Sticky y ads are
broadly divided into two categories.
- Horizontal
- Vertical.
Horizontal: Horizontal ads are generally placed
at the header and footer of a website & these are generally spread from one
end to other ends in a landscape manner.
Anchor ads that we get in the “auto ads” section of Adsense
is an example of a Horizontal sticky ad.
Vertical: sticky ads are generally placed in the
sidebar of a website and in some cases outside of the sidebar. These are
designed in such a way that they will stick in the sidebar even though the user
scrolls down the page.
Benefits of using sticky Ads
Sticky ads are a great way to boost your AdSense
revenue as it increases the overall impression & click-through rate [CTR]
of your website as well as improve your CPM value over time.
Here are some statistical data that proves the above point.
- Get
40-60 % Higher CTR compared to normal display ads
- Improve
Viewability Up to 200% more viewable than other ads formats on the same
placements.
- Get
30-70% Higher CPM Advertisers shell out more for these ads.
We will also discuss the guidelines for placing sticky ads
in Blogger but before that let’s understand how you can add sticky footer ads
to your website.
Before proceeding with the below steps make sure to take a
backup of your theme, so that if you do anything wrong, you can easily restore
your website to its original position by uploading the backup file.
How to add a Responsive Sticky Ads on Bottom in Blogger
To add a sticky Ads on Blogger bottom follows
the below steps.
Step 1. Login to your Blogger
dashboard>Click on Themes> Edit HTML>Find the ]]></b:skin
Step 2. Below have a CSS code, just copy it
and paste it just above ]]></b:skin>l on your Blogger
Template.
CSS CODE ⬇
.AT-ads { position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s
ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }
.AT-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); }
.AT-ads .AT-ads-close svg { width: 22px; height: 22px; fill: #000; }
.AT-ads .AT-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
Step 3. Now Copy the below HTML the code in
just above the </body> tag of your Blogger Template.
HTML CODE⬇
<div class='AT-ads jhfdiuh0' id='AT-ads'> <div class='AT-ads-close'
onclick='document.getElementById("AT-ads").style.display="none"'><svg viewBox='0
0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6
256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256
233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6
8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7
11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0
6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='AT-ads-content'>
<ins class="adsbygoogle"
style="display:inline-block;height:90px;width:100%;line-height:90px;"
data-ad-client="ca-pub-7106786904889658" data-ad-slot="8739667740">
data-ad-format="auto"
</ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
</div></div>
Step 4. Now login to your AdSense account
and create a Responsive Display ad.
Step 5. Now just copy the client pub ID and
ad slot ID code and replace with marke with "xxxxxxxxxx" field
and Save the Template.
Finally you have successfully added the Sticky Responsive
Bottom Ads To Blogger Site.
Policy Guideline for implement sticky Ads
Before implementing Sticky ads it’s
important to understand Google’s policies about this ad format.
Make sure to read Google’s policies carefully before
you make any changes in your account.
Sticky ads are a fixed/ persistent ad that stays
visible in the viewport as the user scrolls the content of the page up or down.
- Must
cover less than 30% of the screen at any time.
- One
vertical sticky per viewport
- One
horizontal sticky per page
- No
cursor-associated movements (sticky ad must remain immobile)
- Plenty
of whitespace/ boundary between the ad and content, so it’s
distinguishable from the content
Conclusion
Horizontal top and bottom sticky ads work well in smart
devices and vertical sticky ads work well with the desktop.