How To Make Notifications For Adblock Adsense - For managers of blogs, advertising is one source that can provide the impetus to continue writing content that is useful for readers, and some other for hosting payment purposes (if using hosting) or to rent a domain.
But we can not deny, many blog managers are too excessive in advertising with the intention to get more income. Of course this can interfere with the convenience of the blog visitors.
That way we can not blame Internet users using Adblock for their convenience in surfing in cyberspace. Adblocker can turn off ads on blogs so that ads do not appear and do not interfere with blog visitors.
But if we as a manager of the blog does not advertise excessively so as not to interfere with visitors in reading the content, of course with the Adblock will inhibit revenue from ads posted on 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 Adblock users for Adsense ads to include our blog into their Adblock whitelist. When AdBlocker is detected, a notification will appear covering the page and turning off the page scroll. But there will be a Close Button that essentially serves as a page refresh button, so even though the close button is clicked and AdBlocker is not disabled it will refresh the page but the notification will still appear covering the page.
After AdBlock is disabled, then when the × (close) notification button is clicked, the page will be refreshed and of course the Adsense ads will reappear and automatic notifications will not appear.
How, are you interested to install it? If you would like to give it a try, please follow these steps:
1. Please copy the CSS code below and then save it just above or before the code </head>
<style type='text/css'>
#keepads{position:fixed;bottom:-7000px;opacity:0;transition:all .3s;z-index:100000}
#keep-ads{background:#1C90F3;color:#fff;text-align:center;padding:20px;position:absolute;left:50%;top:25%;margin-left:-25%;font-size:160%;line-height:1.2em;transition:all .3s;width:50%;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:2}
#keep-adslayer{position:absolute;bottom:0;left:0;right:0;top:0;background:#000;background:rgba(0,0,0,.9);z-index:1}
#keep-ads h3{margin:0 0 20px!important;font-size:30px}
#keep-ads p{margin:0!important;font-size:18px}
#keep-ads a{color:yellow;text-decoration:none}
#keepads.show{pointer-events:auto;opacity:1;bottom:0;left:0;right:0;top:0;}
.close-keep-ads{position:absolute;top:0;right:0;font-size:24px;font-weight:700;cursor:pointer;width:24px;height:24px;line-height:24px;text-align:center}
.flow{overflow:hidden}
@media screen and (max-width:640px){
#keep-ads{width:80%;margin-left:-40%;top:10%}
#keep-ads h3{margin:0 0 10px!important;font-size:20px}
#keep-ads p{margin:0!important;font-size:16px}
}
</style>
2. Then copy the code below just above or before the code </body>
<b:if cond='data:blog.url not in {"http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html"}'>
<div id='keepads'>
<div id='keep-ads'>
<h3>AdBlock Detected!</h3>
<p>Like this blog? Keep us running by whitelisting this blog in your ad blocker.</p>
<p>This is <a href='http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html' 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='refresh()'>×</div>
</div>
<div id='keep-adslayer'/>
</div>
<script>
//<![CDATA[
setTimeout(function() {
var body = document.body;
var info = document.getElementById("keepads");
var ads = document.querySelectorAll("ins.adsbygoogle");
if ($(ads).height() === 0 ) {
info.className = "show";
body.className = "flow";
}
}, 2000)
function refresh() {
location.reload();
}
//]]>
</script>
</b:if>
Note. !!
- In this URL http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html Replace it with the URL of the Whitelist page of your blog
- And make sure your blog is already using the Jquery Library regardless of its version.
3. Done, and can try the result.
Easy is not to create a Notification For AdBlocker Adsense User, hopefully can be useful, and good luck.
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog