Today we will know about how to add sticky floating bottom ads on blogger.
What are Sticky Ads?
Sticky ads are a banner ad format that hovers on the screen sticks or sticks to the edges of the screen on a site that is separate from the content and can be closed easily.
![[ Working ] How to Add Bottom Sticky Ads in Blogger | Dn123](https://blogger.googleusercontent.com/img/a/AVvXsEieoAKzLb9bgyfoS9B5QxcFVTq2N3Sdb1zpPopYZIn4W3SPhCPWiisTH7xDBNcD2okYGPd2IXACEWN5QhX-FRSubwU8Q69As1wIn2INu1ot3ilvQyCsnPgOccSjA3OSYwTrBh0qq6pND1_ynKrD9aruMf5Ba50yzthAJIS0rH1rcHmZH_fdzCjTATx4bw=w640-h234 "[ Working ] How to Add Bottom Sticky Ads in Blogger | Dn123")
Benefits of Sticky Ads?
A sticky floating bottom ad is very good for your AdSense ad impression.
If you want to get more ads impression, the more money you can earn from it.
The sticky floating bottom is always shown to your customer/visitor, so the click-through rate (CTR) is so high. If they click on your ads you can earn more money from them. Let’s know how to add a floating bottom ad.
How to Add Bottom Sticky Ads in Blogger?
You can easily add floating bottom ads on blogger > 1 minutes
Step 1
Now Go To Blogger >Then Select Theme > Select Edit HTML next to Customize.
Step 2
Copy CSS and past before </head> tag
<style>
.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; }
</style>Then add HTML code between <body> and </body> Tag
<div class='AT-ads jhfdiuh0' id='AT-ads'>
<div class='AT-ads-close' onclick='document.getElementById("AT-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='AT-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=""></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>Download All Code
Conclusion:
Thanks for reading the "[ Working ] How to Add Bottom Sticky Ads in Blogger | Dn123" post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.