How To Add Floating Ads In Blogger Post
Hello friends today in this artical I’m going to show you how to add floting ads in blogger you can use this code any where with your requirements.
The all coding language is HTML, CSS as well as JavaScript so let’s see how to add it in your site.
First copy the CSS code and go to your blogger dashboard and open theme section in edit html mode and paste the css code into the <head> section first follow the steps.
#floating_ads_container {
position: fixed;
bottom: 2px;
width: 100%;
-webkit-transition: width 1s, height 1s;
transition: width 1s, height 1s;
z-index: 999;
}
#floating_ads_wrap {
text-align: center;
}
#floating_ads_bottom_ad {
display: inline-block;
position: relative
}
#floating_ads_bottom_close {
position: absolute;
top: -20px;
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
border-radius: 50%;
cursor: pointer;
text-align: center;
height: 25px;
width: 25px;
line-height: 25px;
background-color: #ccc;
z-index: 5;
color: #fff ! important;
right: -10px;
}
After that copy the HTML code and goto the <body> section and paste the HTML code follow the steps from given image.
<b:if cond='data:view.isPost'>
<div id="floating_ads_container">
<div id="floating_ads_wrap">
<div id="floating_ads_bottom_ad">
<!-- Ads code paste here -->
<div id="floating_ads_bottom_close">
<a href="#" onclick="document.getElementById('floating_ads_container').style.display='none';return false;" id="floating_ads_bottom_textcss_x">×</a>
</div>
</div></div></div></b:if>