How to Add Bottom Sticky Ads in Blogger?

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.

~~Table of Content (toc)~~

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 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 == &quot;true&quot;'>-->
<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.

How to add this Bottom Sticky ad on WordPress?

Step 1: Open your WordPress Admin Dashboard
Step 2: Next, go to the plugin section and install the Tag Manager Plugin
Step 3: Open plugin Dashboard and Copy Below the CSS Script First
Step 4: Paste the script on <body> Section on Plugin Dashboard


<style> /* Buttom Sticky Ad - Pixabin.com */
.Pixabin-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; } 
.Pixabin-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); } 
.Pixabin-ads .Pixabin-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.Pixabin-ads .Pixabin-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }<style>

Step 5: Next Copy the Sticky Html Script and Paste Directly on </body> Section on Plugin Section
Step 6: Save the Change
Step 7: Done