How to add a Responsive Sticky Ads on Bottom in Blogger

Hey Bloggers! Are you Want to add a Responsive Sticky Ads on Bottom in Blogger website and boost revenue? then this article will very useful for you.

How to add a Responsive Sticky Ads on Bottom in Blogger

But! before do that, you need to know the basics of what is sticky ads, different types of sticky ads, 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 which stays visible on the page while the user scrolls through the content of your page. When you implemented 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 is 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.

  1. Get 40-60 % Higher CTR compared to normal display ads
  2. Improve Viewability Up to 200% more viewable than other ads formats on the same placements.
  3. 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(&quot;AT-ads&quot;).style.display=&quot;none&quot;'><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 ads.

 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.

If you face any problem implement this ads, you can contact me in telegram or write your problem comment box.

If you like this article then don’t forget to share this with your friends and join our Telegram channel for more updates in blogging tips.

Debashis

Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

Post a Comment

To be published, comments must be reviewed by the administrator.

Previous Post Next Post