Bottom Fixed Sticky Footer Ads For Websites

Such advertisements can increase the revenue of your website at least a little bit. You may notice that such advertisements are common on most websites. We do not require JavaScript for this code. You can only display such an ad at the bottom of your website using CSS code.

You can only display ads as you wish on desktop or on both desktop and mobile devices. However, to show such ads only on desktop devices, attach it by omitting this part of the CSS code given below.

@media (max-width: 868px) {

.fxdfooter-ads {

    display:none;

  }

}

If you notice well, you can see Above css section has [display:none;] that means if you use this css attribute your Bottom Fixed Sticky Footer Ads not show under 868px devices. 

CSS Section:

<!-- Responsive Bottom Sticky Footer Ads CSS -->

<style>

.fxdfooter-ads {

position: fixed;

bottom: 5px;

left: 0;

width: 100%;

max-height: 70px !important;

display: flex;

justify-content: center;

z-index: 20;

}

@media (max-width: 868px) {

.fxdfooter-ads {

    display:none;

  }

}

.fxdfooter-ads-close {

position: fixed;

z-index: 111111;

cursor: pointer;

bottom: -4px;

color: white;

background: blue;

width: 100px;

border-radius: 5px 5px 0px 0px;

font-size: 10px;

}

.fxdfooter-ads .fxdfooter-ads-close svg {

width: 22px;

height: 22px;

fill: #000;

}

.fxdfooter-ads .fxdfooter-ads-content {

overflow: hidden;

display: block;

position: relative;

text-align: center;

max-height: 70px !important;

width: 100%;

}

.fxdfooter-ads{

     animation:animatebottom 5.4s;

}

@keyframes animatebottom{

    from{bottom:-300px;opacity:0} 

    to{bottom:0;opacity:1}

}

</style>

HTML Section:

<!-- Responsive Bottom Sticky Footer Ads For Blogger or WordPress -->

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

<span class='fxdfooter-ads-close' onclick='document.getElementById("fxdfooter-ads").style.display="none"'>skip</span>

<div class='fxdfooter-ads-content'>

Ad Code Here !

 </div></div>

Live Preview !