Create Sticky Floating Ads with jQuery | How to Install Sticky Ad Below Blog

How to Install Sticky Ad Below Blog this is indeed very suitable for blog that want to add more ads slots than before. How Install Sticky Ad under the blog? we often find on popular sites or sites that provide advertising space, what else if not to look for profits from the results of blogging.
What needs to be considered when having Sticky Ads on your site is that it would be better if you add a close button on the Sticky Ads content so that visitors can choose to close ads that they think are less desirable.

Alright, so from here cssmoz will give tips How To Install Sticky Ad Below Blog as follows.

How To Install Sticky Ads banner Below Blog

Open the pageBlogger > Click on menuLayout > Add a new widget and add the code below in the widget.

<style type='text/css'>
.stickywrap{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:9999}
.stickyzone{text-align:center;display:block;max-width:970px;height:auto;overflow:hidden;margin:auto}
.stickyzone img{max-width:100%;height:auto;vertical-align:middle}
.stickyclose{cursor:pointer;text-align:center}
</style>
<script type='text/javascript'>
$(document).ready(function({$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='stickyb' class='stickywrap'>
<div><a id='close-stickyb' onclick='document.getElementById(&apos;stickyb&apos;).style.display = &apos;none&apos;;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnD4mvgwcT1Ek5kR58VgjtcgRr8dEsDCFL56o1PAxl9WJwVsH1fVWceJQcQj1cH-LS5Y8ZSH_6R0yPgpCD2k60dbWB-ekJy8jFh-ABdIPuVAAFikI7YqBdf_TnetY3hMp4YZOqtwEpmaV/s1600/sevenclose.png' title='Close this ad' class='stickyclose'/></a></div>
<div class='stickyzone'>
<a href='#' title='Banner ad here'><img alt='Banner ad here' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySyKs-qUJ1g8t3l1CHp2-O6aLn1hyUqGRYLau5RH9U3QZ-UVpuSBElZ4kp_g6bOK_spUVqtGvAs9DbyZsYwB0bhReF6opYth3WU2_xxiXPMgyrivsf6YShsR-ZkiRyGVHfX2z3NAOAGf1/s1600/sevenn.png'/></a>
</div>
</div>

Edit the highlighted sections and adjust them to your blog, make it works

After that save the widget complete, and your banner ads ready.

If you want to add the ad unit code from Google AdSense or other ad units, delete the section marked in the code below and replace it with your AdSense ads unit.

<style type='text/css'>
.stickywrap{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:9999}
.stickyzone{text-align:center;display:block;max-width:970px;height:auto;overflow:hidden;margin:auto}
.stickyzone img{max-width:100%;height:auto;vertical-align:middle}
.stickyclose{cursor:pointer;text-align:center}
</style>
<script type='text/javascript'>
$(document).ready(function({$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='stickyb' class='stickywrap'>
<div><a id='close-stickyb' onclick='document.getElementById(&apos;stickyb&apos;).style.display = &apos;none&apos;;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnD4mvgwcT1Ek5kR58VgjtcgRr8dEsDCFL56o1PAxl9WJwVsH1fVWceJQcQj1cH-LS5Y8ZSH_6R0yPgpCD2k60dbWB-ekJy8jFh-ABdIPuVAAFikI7YqBdf_TnetY3hMp4YZOqtwEpmaV/s1600/sevenclose.png' title='Close this ad' class='stickyclose'/></a></div>
<div class='stickyzone'>
<a href='#' title='Banner ad here'><img alt='Cssmzo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySyKs-qUJ1g8t3l1CHp2-O6aLn1hyUqGRYLau5RH9U3QZ-UVpuSBElZ4kp_g6bOK_spUVqtGvAs9DbyZsYwB0bhReF6opYth3WU2_xxiXPMgyrivsf6YShsR-ZkiRyGVHfX2z3NAOAGf1/s1600/sevenn.png'/></a>
</div>
</div>

Click the button below to see the results

• Result

Okay, that's all of cssmoz for Create Sticky Floating Ads with jQuery - Banner Scroll may be useful. Thank you for visit us.