How to Add Responsive Sticky Footer Ads on WordPress & Blogger

Friends, in today’s post, we will learn in detail about how to add responsive sticky footer ads on WordPress and how to put them in Blogger and if you use custom ads, then these great codes are going to help you the most, so without any delay, let’s get started

How to Add Responsive Sticky Footer Ads on WordPress

Just you have to use some codes with your Ads unit to place Sticky Footer Ads on WordPress. There are two major steps you have to follow.

Recommended Ads type – Display Ads, Fixed Size 728 Pixel By 90 Pixel

Step-1

1. Click on Appearance
2. Go to Customize
3. Open “Additional CSS” Section
4. Copy then Paste the CSS Code
5. Save Change Click on “Publish”

.SH-Ads { position: fixed; bottom: 0px; left: 0; width: 100%; padding: 5px 5px; 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; } 
 
.SH-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); } 
 
.SH-Ads .SH-Ads-close svg { width: 22px; height: 22px; fill: #000; } 
 
.SH-Ads .SH-Ads-content { overflow: hidden; display: block; position: relative; height: auto; width: 100%; }

Step-2

1. Click “Appearance“
2. Choose “Theme Editor“
3. Go to “Footer.php“
4. Search “</body>“
5. Paste the HTML Code before “</body>“
6. Replace “XXXX Ad Code XXXX…” with the original AdSense Ad Code.
7. Click on “Update File“

<div class='SH-Ads jhfdiuh0' id='SH-Ads'>
<div class='SH-Ads-close' onclick='document.getElementById("SH-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='SH-Ads-content'>
<center>
XXXX Ad Code XXXX…
</center>
</div>
</div>

Finally, Replace “XXXX Ad Code XXXX…” with the original AdSense Ad Code to show your advertisement on your website, make sure to create a 728 Pixel By 90 Pixel Fixed Display Ad unit for Responsive Sticky Footer Ads.

INFO: Code Has Been Updated, Now Same code can be used for both WordPress & Blogger.

How to Add Responsive Sticky Footer Ads on Blogger

If you want to install display ads then we recommend you to use the size 728 pixels by 90 pixels

Step-1

• Open Blogger Dashboard
• Click on “Theme“
• Go to “EDIT HTML“
• Search for “</style>“
• Just copy CCS code and paste before “</style>“
• Click on “Save“

.SH-Ads { position: fixed; bottom: 0px; left: 0; width: 100%; padding: 5px 5px; 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; } 
 
.SH-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); } 
 
.SH-Ads .SH-Ads-close svg { width: 22px; height: 22px; fill: #000; } 
 
.SH-Ads .SH-Ads-content { overflow: hidden; display: block; position: relative; height: auto; width: 100%; }

Step-2

• Go to “Layout“
• Add New Gadget
• Select a “HTML/Javascript Gadget“
• Copy HTML Code and Paste it.
• Replace “XXXX Ad Code XXXX…” with the original AdSense Ad Code.
• Save the Gadget.

<div class='SH-Ads jhfdiuh0' id='SH-Ads'>
<div class='SH-Ads-close' onclick='document.getElementById("SH-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='SH-Ads-content'>
<center>
XXXX Ad Code XXXX…
</center>
</div>
</div>