How to Add Bottom Sticky Ads in Blogger?

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 they need for 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 for 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. First, you need to go to the Blogger dashboard i.e.Blogger.com.

Step 2. Go to the Themes Section and Click the Edit HTML Button.

Step 3. Copy the CSS Code given below.

/* Sticky Ads */
.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; }

Step 4. Paste the CSS Code above the ]]></b: skin> tag.

Step 5. Copy the HTML Code given below. Change Your Script in <script>...</script> tags

<div class='sticky-ads' id='sticky-ads'>

<div class='sticky-ads-close' onclick='document.getElementById(&quot;sticky-ads&quot;).style.display=&quot;none&quot;'><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'>

<script type="text/javascript">

atOptions = {

'key' : '724a48cf3c2f83a3fd40e9df1d64d3e2',

'format' : 'iframe',

'height' : 90,

'width' : 728,

'params' : {}

};

document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.profitabledisplaynetwork.com/724a48cf3c2f83a3fd40e9df1d64d3e2/invoke.js"></scr' + 'ipt>');

</script>

</div>

</div>

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 understand 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.