Add Responsive Banner Ad Widget With Close Button

How to add a responsive banner Ad widget with close button in blogger - As you guys already know that at the present time everything should be responsive because if you are unable to make your blog responsive, then it's my guarantee you will never get any positive result from search engines. So today with the help of this article you will learn how you can easily install a collapsible (Hovering) ad widget in your blog within a few simple steps.

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.

As far as I know, if you are a new blogger in blogging world and want to increase your online sales then this widget is best for your blog. Now before adding this widget into your blog my suggestion to you is take a look of this widget by clicking on the below demo button.

Demo

Now if you like this widget and want to set up this responsive widget into your own dashing blog then follow the below simple steps.

How To Add Responsive Banner Ad Widget In Blogger?

First login to your blog dashboard - Login

Now go to your "Template" section and then click on the "Edit Html" button.

And then find the below code by pressing "Ctrl + F" key together from your keyboard.

</body>

After that, copy the below HtmlScript code and paste it just 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/AVvXsEiEfbnUx34pDxa3kxPr1ZfmBh5ebpbXGyu5oq-HXfgZh3kDgxrDpqS2ENBkndieaLVZjhvs8AXPYXbptdS8Vh2ounkN5iJUo14P9ci5exUZ0xTVm9q-XDQQACsAAU_WXq0M0Nhy8o8wrrQz/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eejjOVoxffIH1rDo8zL39adHQm5LuI4PTnJYNCfSrjzrMX8yqisB9F3W4AFJUGq-LbynEHDDv2TNVIdKJ3fS-ogS1-YTJMr7ZWE1xwBqxh8giwc09Ngf9wojcnsln26A8OyE9MkXPItz/s1600/www.askwithloud.com.png'/></a>
</div>
</div>

Now click on the orange save temple button to apply the changes.

You can change the highlight code with your own information.

You can also change the width of this widget that is marked as desired. 

That's it! I hope you like this widget! Stay tuned for more cool widgets! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES