Notifications For Adblocker Adsense Users

TipTopGuru New Tutorial About Blogger Advertising is one way for blog writers to generate income on the blog, of course the income earned to extend the hosting / domain on the blog 

But unfortunately, many blog users, too much use of advertising on his blog, what else is the layout of his ads are irregular and very disturbing for the visitors, there again, blog users are very forced pengungung his ads so that it can be clicked, pop up on one page of his blog, what else there is no close button when pop up ads appear, it is very annoying at all 
Notifications For Adblocker Adsense Users

excessive use of ads on blogs, also not good on the blog itself, because it is very disturbing for the visitors of the blog 

For that, we need to create a notification for Adblocker users to turn off Adblocker on our blog, who knows the ads that appear is the content that visitors are looking for. We need to explain that we are not over-advertising or trapping visitors to click on ads, for that we ask his willingness to visitors to turn off Adblocker on our blog because the ads on our blog do not bother them. 

Well this time we will install a notification for Adblocker users for Adsense ads to include our blog into their Adblock whitelist. 

When a visitor uses Adblocker, then Adsense ads do not appear automatically. If Adsense ads do not appear then Adblocker notifications will appear at the bottom of the blog as shown below.

put the code below above </ head> code

<style>
#keep-ads {
  background: #1C90F3;
  color: #fff;
  padding: 10px 20px;
  position: fixed;
  bottom: -150px;
  left: 0;
  opacity: 0;
  font-size: 100%;
  line-height: 1.5em;
  transition: all .3s;
  width: 100%;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 100000
}
#keep-ads p {
  margin: 0!important
}
#keep-ads a {
  padding: 0 6px 2px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid transparent
}
#keep-ads.show {
  pointer-events: auto;
  opacity: 1;
  bottom: 0
}
.close-keep-ads {
  position: absolute;
  top: 1px;
  right: 4px;
  line-height: 1;
  font-size: 24px;
  font-weight: 700
}
</style>

then place the code below above </ body> code

<div id='keep-ads'>
  <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker.</p>
  <p>This is <a href='URL PAGE HOW TO WHITELIST' target='_blank' title='how to whitelisting'>how to whitelisting</a> this blog in your ad blocker.</p>
  <p>Thank you!</p>
  <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
<script>
//<![CDATA[
setTimeout(function() {
  var info = document.getElementById("keep-ads");
  var ads = document.querySelectorAll("ins.adsbygoogle");
  if ($(ads).height() === 0 ) {
    info.className = "show";
  }
}, 2000)
function hidekeep() {
  var e = document.getElementById("keep-ads").style.display = "none";
};
//]]>
</script>

please change the text to your liking, change the URL PAGE TO WHITELIST with your own url, example its page like this

so many tutorials this time 

No comments:

Post a Comment