In the past I have shared How to Place Ads on the left and right of the blog. The display of the resulting ad must be located on the right and left of the blog, as well as floating. However, even if it floats, the ad is displayed outside the blog content column, in other words, the ad display does notenter the blog content area.
So as a result, if the blog is opened on a PC or device that can only display the blog content area, then the ad cannot be displayed. Unless a PC or device can Zoom out on the Blog page.
If on your blog you place an ad space like that, it could be that an understanding advertiser will be less interested in placing an ad. Or even the advertiser did not find the ad space at all. Therefore, this time I will share how to create an ad space with a similar position but not as weak as the previous ad space.
The resulting ad display will float and be on the right and left side of the blog. Unlike previous ads that were outside the blog content area, this one will continue to be attached to the right and left side of the monitor. So no matter how big the blog page size is displayed on a PC or other device, this ad will continue to be displayed even if it blocks the Blog content.
But of course if this ad blocks Blog content, it will definitely disturb the views of Blog visitors. Therefore, this ad is equipped with a close button so that it can be removed for the convenience of Blog visitors. The following is an example of the result.
Placing Floating Ads Next to Blogs With Close Button
- Sign in to your respective Blogger account.
- Go to the Layout section.
- Click add gadget in any widget column.
- Select HTML/Javascript mode.
- Enter the following code.
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMj9Z2KaGVkjE3EFKpijbWhZylmWC9VPn3SyKLBk8pPM5p00luwKZ36SJBdXQ2tHMtJvIGsri_N36wEUWUQCL7OCyMjLttL7G79Ti8ZDnAI_qPFhWcmdPfWNAzvaHCUvQtZCn1hcuhmqgE/s1600/close3.png' alt='close' title='close button'/></center></a></div>
<!--Start here-->
<!--Ads Script in here-->
<!--End Here-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMj9Z2KaGVkjE3EFKpijbWhZylmWC9VPn3SyKLBk8pPM5p00luwKZ36SJBdXQ2tHMtJvIGsri_N36wEUWUQCL7OCyMjLttL7G79Ti8ZDnAI_qPFhWcmdPfWNAzvaHCUvQtZCn1hcuhmqgE/s1600/close3.png' alt='close' title='close button'/></center></a></div>
<!--Start here-->
<!--Ads script in here-->
<!--End Here-->
<!--end: floating ads--></div>
- Enter the ad script that will be installed on the left side of the blog in red writing.
- Enter the ad script that will be installed on the right side of the blog in blue writing.
Click save, and you're done.
Ads have also been installed floating on the left and right with the close button as in the example in the screenshot above.