Widget HTML Atas

How to Make Sticky Anchor Ads on Mobile Bottom Screen Increase adsense ad clicks

 How to Make Sticky Anchor Ads on Mobile Bottom Screen Increase adsense ad clicks



 Starting from setting the latest google adsense automatic ad script for anchor sticky ads that don't appear when moved to the bottom of the mobile version of the screen, I finally took the initiative to manually install anchor sticky ads so that they always appear below the cellphone screen.  This is an alternative for those of you who want to install sticky type ads (sticking) for your blog on the lower side of the cellphone screen to increase the number of ad clicks so that your income is maximized.


 The similarity of this type of ad with anchor auto ads or hash mark ads is that they are both attached to the edge of the mobile screen so that the ad will still appear when visitors scroll down the page for the mobile version.  It's just that this manual sticky ad will only appear at the bottom because its placement is set so that it only appears at the bottom of the screen.  The placement at the bottom is also an alternative for those of you who feel that the placement of anchor auto ads on the top side is not optimal.


 To manually create this type of anchor sticky ads ad code, we must put some script code in the blog template html edit mode.  We will also use javascript code to set the ad appearance when a visitor scrolls or scrolls the page to the bottom of the screen.  The display of this ad is also quite cool because it is almost similar to the automatic version of the ad.  For visitors, this manual sticky ad can also be closed easily because of the close button on the top right side of the ad.  For appearance see the image below:


 bottom screen sticky ads


 Is it Safe and Allowed by Google?


 Before continuing on how to make it, maybe there is something that still bothers you about the security side of this type of ad for your adsense account.  As we know, Google is getting stricter in implementing each of its policies for every Adsense publisher.  For the convenience of visitors, advertisements that cover pages or displays that are very disturbing are indeed quite prone to violations, so they should be avoided so that we avoid things that are not desirable.


 As for the type of manual sticky ads, it can be said that it is quite safe to use.  This is because the shape and nature are the same as sticky anchor ads in automatic ads, so of course these ads are also safe and allowed by Google.  The bottom line is, as long as the ads don't cover the page or overlap the content, then that's fine and your adsense account will stay safe.  Moreover, this ad is also accompanied by a close button so that it can be clicked easily to close it.


 How to Install Sticky Anchor Ads Manually


 1. Open your blogger account.


 2. Select the theme menu and click edit html.


 3. Find the code </head> and place the following code above it:

<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>

4. Next find the code </body> and place the following code above it:

<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'>

<!-- letakkan kode iklan anda disini -->

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</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>
4. Next find the code </body> and place the following code above it:
<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'>

<!-- letakkan kode iklan anda disini -->

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</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>
Information:

 Replace "put your ad code here" with your ad unit code.  Use a display ad format with a fixed size of 320 X 90. For automatic ads it will not appear on static pages, search results pages, and error pages so it is safer.


 5. Please save your template again.


 That's How to Make Sticky Anchor Ads on the Mobile Bottom Screen Manually.  This type of ad is believed to be quite effective in increasing CTR (click-through rate), so it is hoped that income will also increase as expected.  Hope it is useful.

No comments for "How to Make Sticky Anchor Ads on Mobile Bottom Screen Increase adsense ad clicks"