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 to 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.
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 the 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.
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 {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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%3cpathstyle='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 {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<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.
Tags:
Tech