...

How to Add Responsive Sticky Footer Ads on WordPress & Blogger

Responsive Sticky Footer Ads: AdSense is a major part of Blogging and CPC & CTR are also, two more important things to boost our daily revenue, and Sticky Footer Ads help to Increase our CPC & CTR.

Now just follow the steps to add Responsive Sticky Footer Ads on WordPress & Blogger. Also, I am using these codes on my websites and I am getting good results after placing Responsive Sticky Footer Ads.

if I show my result then look at the below image I am getting more clicks on Sticky Ads.

Result of Responsive Sticky Footer Ads
Result of Responsive Sticky Footer Ads

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

Also, In Blogger you have to follow two major steps, just keep following.

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

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>

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

Follow these steps carefully to show Responsive Sticky Footer Ads on Blogger, I think these methods work for you.

If you have any problems then comment below, also you can ask your doubts, if you like the post then share it with your friends.

May you like some other content,

Blogger पे “Table of Contents” कैसे Add करे
Create Html Sitemap Page On Blogger
How to Get Adsense Approval Within 24 Hour
Share to Help

79 thoughts on “How to Add Responsive Sticky Footer Ads on WordPress & Blogger”

  7. Hey Bro,

    Mujhe aapse puchna tha ki ab adsense khud bhi sticky ads ko support karta hai lekin wo 720/90 size ko support nahi karta maz width 300px hona chahiye to kya agar hum 720/90 use karte hain to afsense disable hone ka kharta hai…

    Maine jabse sticky footer ads use kiya mera CPC or RPM dono acche hain or main use hatana nahi chahta… What to do

    Reply

  8. apne code ko change kiya tha, usi bajha se mere site me kucch din tak sticky ads nehi dikh raha tha, abhi me apka neya code ke sath phirse update kar raha hun

    Reply

  15. Blogger par css galat hai aapne jo video me paste kiya hai or jo website me hai to alag alag hai , check kare or update kare

    Reply

  19. bhai kya bina Ads close kiye sticky footer ads chalega mai bhut try kiya hoon aapse bnta hai to mujhe wordpress website ke liye custom code send karen yhi ya email par

    Reply

  20. wordpress official website par khud ka plugin kaise publish karen or uski license tmam jankari den bhai ya nhi de skte hain to mere email pte par gide karn

    Reply

Leave a Comment