How to install a Sticky / Anchor ad on a blog with html code

How to install a Sticky / Anchor ad on a blog with html code



Sticky or Anchor Ads are advertisements on blogs or websites attached below or above the articles and these ads are still visible when visitors scroll down or up a page or can be called floating ads.


Sticky or Anchor ads are very helpful for publishers to increase the number of clicks. Ads will only appear on mobile devices and will not appear on the desktop. Ads or anchors are equipped with buttons (close ads) if visitors want to close the ad. Because of its small form, the ad still won't interfere or cover your blog page. Also read : Initial preparation to build a blog / website.

Actually Anchor / advertisement is already available in the ad unit settings in adsense, but many publishers complain that using the default ad anchor from Adsense looks a little annoying because there will be free space when this ad appears on the blog. Then I will share ad code that can display adverts or anchors without using automatic adsense default ads. the advantage of embedded ads that I made has a more attractive appearance and does not cause empty space when this anchor ad appears. Also read : Pay attention to the speed of loading your blog to improve SEO

Here's the HTML code to display Anchor or sticky ads on your blog / website :

1. Go to blogger >> Themes >> Edit HTML >> Copy and save the following code above the <Head> code.

 <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<style>
/*<![CDATA[*/
.sticky-ad {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: visible;
  position: fixed;
  text-align: center;
  bottom: -104px;
  left: 0;
  width: 100%;
  z-index: 999;
  max-height: 104px;
  background-image: none;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  padding-top: 4px;
  transition: all .4s ease-in-out;
}
.sticky-ad-close-button {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-size: 13px 13px;
  background-position: 9px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 0 0 0;
  cursor: pointer;
}
.sticky-ad-close-button:before {
  position: absolute;
  content: "";
  top: -20px;
  right: 0;
  left: -20px;
  bottom: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:active,
:focus {
  outline: 0
}
/*]]>*/
</style>
</b:if>

2. And save the following HTML code above the <body> code

 <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Ad code please save below -->

<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>

<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

To make it easier to find the code <head> and <body> click ctrl + F in the html edit box on the theme of your blog. Change the number 300 to adjust the height of the Sticky ad or anchor. install your adsense ad code according to the html code command above.
Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar