Adblock detector for WordPress / Blogger
byM.Muzammil-2
Previously I have shared Adblock detector blogger widget which detects ad blocker extension in Chrome browser or any other browsers.
This is another beautiful Adblock detector. You can use this Adblock detector in blogger site as well as in your wordpress site. You can also use the previously shared Adblock detector in your wordpress site.
This ad block detector widget allows your site or adds up functionality in your website to detect Adblock extensions in different browsers.
If you want to know the advantages and disadvantages of using Adblock detector into your wordpress or blogger site you can read this article for that.
I hope that you will be familiar with the advantages and disadvantages of ad block detectors now let me share with you the source code of this Adblock detector and the steps to add this into your wordpress for blogger site.
Follow these steps to install this widget:
For Blogger:
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </body>
- Now copy the code provided below and paste it above </body> tag.
- Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
<style>
div[class^="ykwrp_"]{display:none}
.ykth-inner{font-family:"Open Sans","Roboto",Segoe UI,sans-serif;background:#FFF;position:fixed;width:40%;left:0;right:0;top:30%;margin:auto}
div[class^="ykwrp_"]:before,#ykth:before{content:"";position:fixed;background:#00000055;top:0;left:0;right:0;bottom:0;width:100%;height:100%}
.ykth-head{background:#de2b2b;color:#FFF;padding:20px}
.ykth-head>svg{float:left;margin:0 9px 0 0;animation:shake .82s cubic-bezier(.36,.07,.19,.97) 7;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}
.ykth-head>i{position:absolute;top:16px;right:16px;cursor:pointer;line-height:13px;font-size:21px;font-weight:700;font-style:normal}
.ykth-head>b{font-size:16px;font-weight:700;text-transform:uppercase}
.ykth-head>p{margin:0 0 0 35px;font-size:14px}
.ykth-body{padding:20px;font-size:100%;line-height:1.7}
.ykth-body>p{margin:0 0 10px}
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
</style>
<div id="ykth"><div class="ykth-inner">
<div class='ykth-head'>
<svg style="width:30px;height:30px" viewBox="0 0 26 26"><path fill="#FFFFFF" d="M13,13H11V7H13M12,17.3A1.3,1.3 0 0,1 10.7,16A1.3,1.3 0 0,1 12,14.7A1.3,1.3 0 0,1 13.3,16A1.3,1.3 0 0,1 12,17.3M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z"/></svg>
<b>Adblock Detect</b>
<p>We have detected that you are using adblock in your browser</p>
<i class="close" onclick="document.getElementById(ykrd1).style.display='none'">×</i>
</div>
<div class='ykth-body'>
<p>Our website is made possible by displaying online advertisements to our visitors.</p>
<p>Please consider supporting us by disabling your ad blocker.</p>
</div>
<!-- Start Condition When JS Disable -->
<noscript>
<div class="ykth-body">
<p>Javascript is disabled in your web browser.</p>
<p>For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="https://www.enable-javascript.com/" target="_blank"> instructions how to enable JavaScript in your web browser</a>.</p>
</div>
<style>#ykth{display:block;}.ykth-inner>.ykth-body{display:none;}.ykth-head>b,.ykth-head>p{font-size:0}.ykth-head>b:before{content:"Javascript Detected";font-size:16px}.ykth-head>p:before{content:"We have detected that you are disable javascript in your browser";font-size:14px}</style>
</noscript>
<!-- End Condition When JS Disable -->
</div></div>
<script>
//<![CDATA[
var ykrd1=Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
var ykrd2=Math.random().toString(36).substring(2, 7);
var e=document.getElementById("ykth");e.setAttribute("id", ykrd1);e.classList.add("ykwrp_"+ykrd2);
document.addEventListener('DOMContentLoaded', init, false);
function init(){
adsBlocked(function(blocked){
if(blocked){
document.getElementById(ykrd1).style.display='block';
} else {
document.getElementById(ykrd1).style.display='none';
}
})
}
function adsBlocked(callback){
var testURL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
var myInit = {
method: 'HEAD',
mode: 'no-cors'
};
var myRequest = new Request(testURL, myInit);
fetch(myRequest).then(function(response) {
return response;
}).then(function(response) {
console.log(response);
callback(false)
}).catch(function(e){
console.log(e)
callback(true)
});
}
//]]>
</script>
For Wordpress:
Copy the code provided above and goto your wordpress template editor and paste this code in your footer.php file.
I'm really sorry i am a blogger user that's i can not provide detailed guide on how to install this in wordpress. I hope you will understand.
After following all the steps provided above this widget will be added into your website perfectly and it will work fine.
In the above source code you can customise the headings add the description message If you want to change.
If you are wondering about the demo of this Adblock detector then click the demo button below to see the real time preview or demo of this Adblock detector.
View Demo
You can also see the demo on your website after installing the source code for adding the source code into your websites source code.
Conclusion:
That's pretty much in today's article I hope that you have successfully installed at block detector in your wordpress or blogger site and it will help you to increase your revenue in your AdSense account.If you have any query please leave your comments in the comments section I am here to help you.
No comments:
Post a Comment