How to add Responsive Bottom Sticky Ads in Blogger
![How to add Responsive Bottom Sticky Ads in Blogger](https://www.techyleaf.in/wp-content/uploads/2021/03/How-to-add-Responsive-Bottom-Sticky-Ads-in-Blogger.webp)
Want to add bottom sticky ads to your Blogger website and give a revenue boost in AdSense then this article will be super helpful to you.
But, before that, you need to understand the basics of what are sticky ads, the different types of sticky ads, and what are the guidelines given by the AdSense team for the proper implementation of these ads.
What is a sticky Ad?
A sticky ad is a fixed ad that stays visible in the exact same position regardless of the user scrolling through the content. These are generally used in the header, footer, left/right bar, left & right sidebar.
Types of Sticky Ads
Sticky ads are broadly divided into two categories. Eg. Horizontal & vertical.
Horizontal ads are generally placed at the header and footer of a website & these are generally spread from one end to other ends in a landscape manner.
Anchor ads that we get in the โauto adsโ section of AdSense is an example of Horizontal sticky ad.
Vertical sticky ads are generally placed in the sidebar of a website and some cases outside of the sidebar. These are designed in such a way that they will stick in the sidebar even though the user scrolls down the page.
Benefits of using sticky ads in Blogger
Sticky ads is a great way to boost your AdSense revenue as it increases the overall impression & click-through rate [CTR] of your website as well as improve your CPM value over time.
Here are some statistical data that proves the above point.
- 40-60 % Higher CTR: compared to normal display ads
- Improve Viewability: 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.
Before proceeding with the below steps make sure to take a backup of your theme, so that if you do anything wrong, you can easily restore your website to its original position by uploading the backup file.
Watch Video Tutorial: How to Setup Infeed Ads in Blogger for better earning.
How to Create Responsive Floating Bottom Sticky Ad in Blogger
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> code or paste it in the additional CSS section of your theme.
![step-1 to add bottom sticky ad in blogger step-1 to add bottom sticky ad in blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWcqhIfe85bQWkqhr8HViX6QMcajJM5spvU4SofjKvZ3XCACdPZrRO839jZDb7mJefsGWmWvnR_E2FMmvdSZl_8CiUd8zHloZQ0K5je8oJdh6DZMIFM6JSl_OOHdgLt236clxD3vt-KY0/w448-h640-rw/step-1+to+add+bottom+sticky+ad+in+blogger.webp)
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 that go to the Theme section and click on customization. Now in the advanced tab search for Add CSS section. 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 code from the display ad unit.
Step-3: Copy the below HTML code and replace the two codes that you copied above.
HTML code for Sticky footer ad
<div class='sticky-ads' id='sticky-ads'> <div class='sticky-ads-close' onclick='document.getElementById("sticky-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='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.
![add bottom sticky ad in blogger add bottom sticky ad in blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj539NUcKkv4pJRZ9KNJX2N7v16TflofxlhnSZTWklFS4z5HOkADS1Zp9jvo9C318ktBzSo2TLj7v4RFXl40UPJB9L2-lEMz0yYfYgG9d2CneVSILLE8fcmCPNOtQc1qGZ_Hp0NuQcwbbX3/w640-h316-rw/sticky+ad+in+blogger.webp)
Now you have successfully added the Sticky Floating Bottom Ads To Blogger Site.
Note: if you are not able to find the ]]></b:skin> code then search for </style> tag or paste in between your theme CSS codes.
If you face any problems you can check the video Guide below.
If you want to stay up to date with the Blogger guide donโt forget to Subscribe to my youtube channel.
If you have any clickable buttons at the bottom like back to top then you can disable it or shift it to a little top of the ad unit using CSS code.ย For this, you can watch this video tutorial here.ย
If you don’t know how to do this you can contact me on Telegram Group.
How to display the sticky ads only on Mobile devices?
Sticky ads are a great way to improve AdSense revenue but, adding them to desktop devices sometimes hurts the user experience.
That’s why you can set a condition in the above code so that it only shows on mobile devices and skip this on desktop devices.
So, all you need to do is add a If condition, just above and below the given HTML code.
<b:if cond='data:blog.isMobileRequest == "true"'> HTML To Show Only in Mobile Devices </b:if>
if you want to display the ads only on a desktop then you have to modify the If condition a little bit. Just change the value “true” to “false”.
Sticky Left & Right Ad Code For Blogger
If you want to display sticky ads on both the left and right sides of your theme then you can download the below code and insert the display ad code. Now paste the whole code to the sidebar of your theme.
Guidelines to add sticky ads to a website
- Must cover less than 30% of the screen at any time.
- One vertical sticky per viewport
- One horizontal sticky per page
- No cursor-associated movements (sticky ad must remain immobile)
- Plenty of whitespace/ boundary between the ad and the content, so itโs distinguishable from the content.
According to Google sticky ads shouldnโt be implemented on Gaming sites and pages with infinite scroll to provide a better user experience.
Conclusion
Horizontal top & bottom sticky ads work well in mobile devices and vertical sticky ads work well with the desktop. But donโt use anchor ads and bottom sticky ads at the same time as it may create a bad user experience for your readers.
I hope this guide will help you add a responsive floating bottom Sticky Ad to the Blogger website. If you like this guide then donโt forget to share this with your friends and join our Telegram channel for more updates.
PS: 15 simple hacks to improve page speed in blogger websites.
Hello!
Can you help or give us idea to create a full page ads unit in blogspot or blogger so that the ads unit display before going to a certain page or post?
I mean can you help us to get this type of code:-
Ad adsense full page ads unit that is displayed before entering to any page or post where we put the code ? The user sees the ads unit first and then only enters to the page or post of blogger or blogspot? Can we create like this?
If yes, please help us or post an article about it in your website.
I am your regular follower, don't disappoint me!
You can enable full page ad in Adsense by enabling Vignette ads in Auto ads setting.
It shows when someone visit 2nd page in your website.
We can't add Adsense ad as a full screen popup as it violates Adsense policy.
is this safe from banning?
Yes, you can add a bottom sticky ad in website and it is just like anchor ad in Adsense.
Infact many popular NEWS websites are using this type of ad.
can we enable auto ads which shows in header along with this bottom ad?
Yes, you can but it looks ugly when both Anchor ad and sticky ad is activated.
Please tell me what's your them name and version. I really like this theme
I am using the Fletro pro V6.0. Join Telegram group to stay updated about latest Blogger tips and tricks.
Thank you ๐๐
Thanks,
How your websites sticky bottom ads cross sign remain after clicking on close ads. Can you tell which Code need to modify.
Actually I am using the sticky codes comes with my theme fletro pro. That's why.
I will try to use this code on other theme, ping me on Telegram for this.
on yor website if me click close button ads not close but come hide , if click again will show up, how to modify like it , very thanks sir
hii bruh i need you help please reply …
Hmm, tell me. You can mail me or Contact in social media