Responsive Ad Slot

Responsive Bottom Sticky Footer Ads For Blogger or WordPress

Thursday, July 14, 2022

/ by Admin
How To Create Responsive Bottom Sticky Footer Ads For Blogger or WordPress ? Responsive Bottom Sticky Footer Ads CSS
<!-- 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%;
z-index: 99999;
}
.fxdfooter-ads{
     animation:animatebottom 5.4s;
}
@keyframes animatebottom{
    from{bottom:-300px;opacity:0} 
    to{bottom:0;opacity:1}
}
</style>
<!-- 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'>

 ----- Add Code Here ---- 
 
</div></div>

Preview:



No comments

Post a Comment

Leave with comments

Don't Miss
© all rights reserved
made with by templateszoo