Anti AdBlock Script
How to Create an Anti-AdBlock Script for a Website/Blog – As a website or blog owner, one of the most reliable sources of income is Adsense Ads by Google and advertisements from other third parties.
Some of them sometime place very many adsense ads, positions and even ad content that readers don’t like.
As a result, to overcome this, website visitors install an extension on a web browser called AdBlock.
What is AdBlock?
AdBlock is a small extension installed in web browsers (Chrome, Firefox, Opera, etc) which is used to partially or completely block advertisements on a website.
With this AdBlok, website visitors only receive websites with articles and core content.
However, some website owners with this AdBlock, slightly reduce their income because the ads that are entered do not appear as they should.
At this time I will share an Anti AdBlock script that will display a notification to turn off the AdBlock extension if the extension is active.
How to Insert Script Anti AdBlock to your Blog.
To start the installation process, prepare an HTML Widget in the layout of your website or blog. In this case I installed this anti AdBlock script on blogger.
Created an HTML/Javascript widget on the sidebar in the first order (top). Then copy the following script and paste to HTML/Javascript widget on sidebar.
<style>
#adblockbyspider {
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.25);
padding: 20px 19px;
border: 1px solid #ebeced;
border-radius: 10px;
color: #ebeced;
overflow: hidden;
position: fixed;
margin: auto;
left: 10;
right: 10;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 999999
}
#adblockbyspider .inner {
background: #f5f2f2;
color: #000;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
text-align: center;
width: 600px;
padding: 40px;
margin: 80px auto
}
#adblockbyspider button {
padding: 10px 20px;
border: 0;
background: #e9e9e9;
margin: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all .2s
}
#adblockbyspider button.active {
background: #fff
}
#adblockbyspider .tutorial {
background: #fff;
text-align: left;
color: #000;
padding: 20px;
height: 250px;
overflow: auto;
line-height: 30px
}
#adblockbyspider .tutorial div {
display: none
}
#adblockbyspider .tutorial div.active {
display: block
}
#adblockbyspider ol {
margin-left: 20px
}
@media(max-width:680px) {
#adblockbyspider .inner {
width: calc(100% - 80px);
margin: auto
}
}
</style>
<script src='https://raw.githack.com/Ashwathnrayana/SpiderBlogging/main/antiadblock/2.0/code.min.js' />
</script>After that, save it.
In my case, I use chrome browser to test this script. It’s also worked at FireFox.
Now try restarting your website and turning on the AdBlock extension, then you will see a notification “Ad Blocker Detected”.
If you see a notification “Ad Blocker Detected”, the script succesfully worked.
Hopefully this can help you website owners and bloggers. If you like this article, please share it with your friends using the share button below.
