How to add responsive Ad Banner Widget in Footer

The actual and best advantage of this type of widget is that, if your visitors bother with ads (that you are displaying on your blog) and they want to remove it then he can easily close it in just one single click. How to add ad banner widget horizontal in the bottom of the site, how to add sticky/floating ad banner in blogger/WordPress. 

In this tutorial, I have come up with a very useful and interesting banner ad widget, which is very helpful for your affiliate's product. The actual and best advantage of this type of widget is that, if your visitors bother with ads (that you are displaying on your blog) and they want to remove it then he can easily close it in just one single click.

Special Features of this widget

• 100% responsive
• Banner with supportive close Button
• Available for desktop only as well as desktop and mobile.
• Attractive for visitor
• Easily customizable
• Easy Installation

 View Demo

To add this widget full of features you have to just follow these simple steps

The widget only for Desktop devices

If you want to display this widget only on the desktop view, not on mobile devices then follow these steps:-

• Copy the below Banner widget code and paste in your website
• Now move to Layout option in your blogger dashboard
• Now scroll down to your footer area and click on "ADD GADGET"
• Now select "HTML/Javascript" option.
• Now copy this code

<style> #fixedban{background-color:#f4f4f4;box-shadow: 4px 2px 8px 6px #888888;width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999} @media only screen and (max-width: 1024px) { #fixedban { display:none; } } </style> <script type='text/javascript'> $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});}); </script> <div id='fixedban'> <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://image.flaticon.com/icons/png/128/0/39.png' title='close button' style='vertical-align:middle;height: 30px; width: 30px;position: fixed;right:15px;bottom:4%;'/></a></div> <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'> <a href='https://factsbyteinjournal.blogspot.com/' title='Banner iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx50G5HpORWfhsEBk6xjHlhNNHnQzoGYy-s7xIQrefkMO5Sl7RBmAzga19P8oFbiY7HjTa7x9Dx0jqXOfBlZwiBN5G2RZrQ-l6Cah6v-_fETNH0pGstssojJyuU4d8wFLhG5kSGvUSG2FO/s1600/ad728.jpg'/></a> </div></div>

• And paste in the dialogue box open and hit save button.

OR

• Open Template editor use CTRL + F for search the </body> tag paste this responsive Banner Ad Widget code above </body> tag.

The widget Desktop as well as mobile devices 

All steps are the same you have to paste only this code in place of the previous ones:-

<style> #fixedban{background-color:#f4f4f4;box-shadow: 4px 2px 8px 6px #888888;width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999} </style> <script type='text/javascript'> $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});}); </script> <div id='fixedban'> <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://image.flaticon.com/icons/png/128/0/39.png' title='close button' style='vertical-align:middle;height: 30px; width: 30px;position: fixed;right:15px;bottom:4%;'/></a></div> <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'> <a href='#' title='YOUR TITLE HERE'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='YOUR ALT AG HERE' src='YOUR AFFILIATE BANNER LINK(of image)'/></a></div></div>

Customization

* You can also put Ads in this widget you have just to paste you Ad code by replacing line number 14 in (desktop devices code) and line number 10 in (desktop as well as mobile device code)

*Put your image link(#),

*you can change the background color by changing this value(#f4f4f4)

*You can customize the size of the banner by changing(max-width:728px)

You this tutorial help you let me know in the comment section and if you face any problem then please feel free to write in the comment box. And don't forget to share with others