Do you want to Add Bottom Sticky Ads in Blogger? Follow the below steps carefully to Add Bottom Sticky Ads in Blogger, and make your blogger blog look remarkable, first let's understand What is are Sticky Ads and What is the need of Sticky Ads?
What are Sticky Ads?
A Sticky Ad could be a fixed ad that stays visible within the very same position no matter the user scrolling through the content. These are usually utilized in the header, footer, left/right bar, left & right sidebar.
What is the need of Sticky Ads?
Sticky Ads helps you to place and emphasize your ads inside and outside of your website's layout. With Sticky Ads you'll produce anchor ads, that are always visible in a browser window. With the help of Sticky Ads, you can display ads that don't scroll with the screen.
How to Add Bottom Sticky Ads in Blogger?
I will guide you to Add Bottom Sticky Ads in Blogger, Ok, let’s begin!
Step 1. At first, you need to go to the Blogger dashboard i.e.Blogger.com.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Copy the CSS Code given below.
/* Sticky Ads */
.sticky-button{position:fixed;bottom:0;right:20px;width:50px;height:50px;border-radius:50px;background-color:#fdd929;box-shadow:0px 4px 12px 0 rgba(9,32,76,.05);z-index:20;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}
.sticky-button.sticky{bottom:20px;opacity:1;visibility:visible}
.sticky-button > *{display:flex;align-items:center;height:100%}
.sticky-button > * svg{margin:auto;fill:inherit}
.sticky-ad{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-ad .sticky-adClose{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-ad .sticky-adClose svg{fill:#767676}
.sticky-ad .sticky-adContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adInput:checked + .sticky-ad{padding:0;min-height:0}
.sticky-adInput:checked + .sticky-ad .sticky-adContent{display:none}Step 4. Paste the CSS Code above the ]]></b:skin> tag.
Step 5. Copy the HTML Code given below.
<!--<b:if cond='data:blog.isMobileRequest == "true"'>-->
<input class='sticky-adInput hidden' id='sticky-adIn' type='checkbox'/>
<div class='sticky-ad' id='sticky-ad'>
<label class='sticky-adClose' for='sticky-adIn'><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'></path></svg></label>
<div class='sticky-adContent'>
<!--<div class='ads-here' style='display:block;height:60px'/>-->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567891234567' data-ad-format='horizontal' data-ad-slot='3466897794' data-full-width-responsive='false' style='display:block;text-align:center'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<!--</b:if>-->Step 6. Paste the HTML Code above the </body> tag.
Step 7. Change the marked section with your AdSense Publisher ID and AdSense Ad Slot ID.
Step 8. Click on Save!
Conclusion
So friends, how did you guys like this post on Add Bottom Sticky Ads in Blogger? Now you must understood How to Add Bottom Sticky Ads in Blogger.
Tell us how you felt about this article on How to Add Bottom Sticky Ads in Blogger? by writing a comment so that we too can have a chance to learn and improve something from your ideas.