Installing Responsive Floating Ads with the Close Button

Installing Responsive Floating Ads with the Close Button - How are you bloggers, this time Arlina Design will provide a tutorial on how to install floating ads (Fixed ad banners or text) that are responsive with the addition of a close button under the blog.

Most people start blogs because of hobbies, but there are also those who have the goal of finding friends, increasing online store sales, making money and so on. As a means of supporting blogging activities, you can install ad space on your blog to help advertisers promote their products.

Banner ads that float in addition to close buttons may often be found on blogs or forums that install them. This close button functions as an alternative if the visitor feels disturbed because the content he read is blocked by the floating banner.

Here's How to Install Responsive Floating Ads with the Close Button

Open Blogger> Template> Then add the code below before </body>

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFK5At-hdrmsAuQGiqnoZ9ORQibu4xIukiCoo-SsD-k-3y0h5toXTtGEPagDU1oEECpCjVPhctBEjcq7DriV7jkvVwTNDg-paMT5-mkPe3q8l3EIl4TM7tycv7FDyBy1x5mOmxsBQ6RjCJ/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='Banner iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
</div>
</div>

Change width and ad description in the code marked as desired.

Save the template.

Results

So about How to Install Responsive Floating Ads with the Close Button, hopefully useful for all friends.