If you want to do guest posting click here. Guest Post!

How to Add Responsive Bottom Sticky Ads in Your Blog

How to Add Responsive Bottom Sticky Ads in Your Blog

Hello Friends, Welcome to The Kathait. In this article, We will Discuss, How to Add Bottom Sticky Ads to a blog. Adding Bottom Sticky Ads is Very Easy to Implement and Will Boost your AdSense Revenue and Help you to More Earning with AdSense. This article will be very helpful for you.

What are Sticky Ads?

A sticky ad is a static ad that appears in exactly the same position without the user scrolling through the content. These are commonly used in the header, footer, left/right bar, left and right sidebar. It is absolutely responsive which is seen in mobile like laptop PC or tablet. Which can also be closed by the user, this process is called Bottom Sticky Ads.

Types of sticky ads

Sticky ads are broadly divided into two categories. For example, Horizontal & Vertical. 

Horizontal ads are usually placed at the header and footer of a website and are usually spread from one end to the other in a landscape manner.

The anchor ads we find in the "Auto Ads" section of AdSense are an example of a horizontal sticky ad.

Vertical sticky ads are usually placed in the sidebar of the website and in some cases outside the sidebar. These are designed in such a way that they will stick in the sidebar even when the user scrolls down the page.

Benefits of Adding Sticky Ads

Sticky ads are very helpful in increasing revenue as it increases the impact and CTR, CPM value of your website. Also, it increases the visibility of the ads which is a great way to boost your AdSense revenue.

Here are some statistical data that proves the above point.

  • 40-60% higher CTR: compared to normal display ads
  • Improve Viewable: Up to 200% more viewable than other formats on the same placements.
  • 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.

Make sure to back up your theme before proceeding with the steps below, so that if you do anything wrong, you can easily restore your website to its original state by uploading the backup file.

Adding Bottom Sticky Ads in your blog

To add a bottom sticky ad on Blogger follow the below steps.

Step 1 - Copy the below CSS code and paste it just above this   ]]></b:skin> Copy the Below CSS code

.sticky-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; } 

.sticky-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); } 

.sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

For this, by going to the theme section, click on Customization. Now find the Add CSS section in the Advanced tab. Now paste the CSS code and save your theme.

Step-2: Now go to AdSense and create a responsive display ad unit.

Now copy the data-ad-client & data-ad-slot codes from the display ad unit.

Step-3: Copy the below HTML code and replace the two codes that you copy above.

<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById(&quot;sticky-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='sticky-ads-content'>

<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

Step 4: Now paste the code just above the </body> tag of your theme & save it.

Second method

Follow the steps given below to add Bottom Sticky Ad in Blogger -

Step 1. Adding CSS Codes

Copy the following CSS Codes and paste just above to ]]></b:skin> tag.

.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 2. Adding HTML Codes

Copy the following codes and paste just above to </body> tag.

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

<!--AdSense Ad Unit-->
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 </div>
</div>

Step 3. Adding AdSense Codes

Go to your AdSense account and create a new Responsive Display Ad Unit.

Now copy the data-ad-client & data-ad-slot codes from the Display Ad Unit and paste these codes where we have marked places for these.

If you are using AdNetwork other than Google AdSense, then delete the code given below and paste your ad codes in its place.

<!--AdSense Ad Unit-->
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

On mobile generally, the size of Sticky Ad is 320×50 and on desktop, they are generally 728×90. So make the ad unit of these sizes to make it 100% responsive.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

This is all about Add Sticky Bottom Ads in Your Blog. I hope this article is very useful for you and you must have easily added this Sticky Ads Widget to your blog. Please share this article and if you are facing any problem, then tell in the comments, we will reply as soon as possible.

© Copyright The Kathait

Post a Comment