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.
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
- Click on Appearance
- Go to Customize
- Open “Additional CSS” Section
- Copy then Paste the CSS Code
- 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
- Click “Appearance“
- Choose “Theme Editor“
- Go to “Footer.php“
- Search “</body>“
- Paste the HTML Code before “</body>“
- Replace “XXXX Ad Code XXXX…” with the original AdSense Ad Code.
- 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.
You May like some other content,
| Blogger पे “Table of Contents” कैसे Add करे |
| Create Html Sitemap Page On Blogger |
| How to Get Adsense Approval Within 24 Hour |
ThankYou Very Much For This Sticky Ads Code.
Thank you sir I applied in my website its works perfect.
Welcome
working bro love you
Thanks
Thank you sir I applied in my website its works perfect.
Great
/style ka nahi hoga theme me to iske jagah kya dhundna padega ?
sare theme me hota hai
Nice bro
Thanks
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
koi issue nahi yah size ka ap use kar sakte ho
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
esa nahi hai, lekin update kar dijiye chal jayega
very good post
Thanks
sticky ads homepage par show nahi karani ..uske liye code me kya changes karna padega soumya bhai ??
cache plugin use kar rahe ho kya
It’s . Ok
Hey! Soumya, I just wanted to let you know that the code you shared does not work for WordPress. Make sure it is correct.
The code doesn’t work with high optimizing cache plugins
Good post brother
Thanks
Very good
Thanks
Thank you for the valuable content
Ha
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
yah update kiya gaya hai or yahi code hi kaam karega
Sir Ji ads show nhi ho rha
kaha pe
Bro yeah sticky ad lagane ke bad me auto ads aa rhi anchor ki wo band karna chahiye
nahi kuchh mat karo
Very Helpful Blog Post For All Blogspot Bloggers And WordPress Bloggers.
Thanks
Very helpful post
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
samjh nahi paya
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
Kosis karunga info. collect karne keliye or batane keliye