Have you ever felt frustrated after pouring your heart into creating amazing content, only to see your ad revenue fall short? If so, you’re not alone. Many of us—whether we’re website owners or bloggers—face this challenge. One of the main culprits? Adblockers. Adblockers are browser extensions or software that block ads on websites. While they provide users with a cleaner, ad-free browsing experience, they also cut off a significant source of income for website owners.
To tackle this issue, many bloggers have turned to anti-adblock scripts or adblock detectors.
As bloggers, we rely on ad revenue to keep our creative engines running. Ads are what enable us to produce valuable content consistently. Unfortunately, as more users turn to adblockers, our revenue potential takes a significant hit. Imagine carefully placing non-intrusive ads on your site, only to have them completely hidden from view. Frustrating, isn’t it? This is where an anti-adblock script comes to the rescue.
An anti-adblock script is a piece of code you can add to your website to detect whether a visitor is using an adblocker. Once detected, the script typically shows a notification encouraging users to disable their adblocker. The message can range from a simple popup to a request explaining how ads support the website. Some scripts even restrict access to content until the adblocker is turned off.
Ready to Get Started? Here's How to Add an Anti-Adblock Script to Your Blogger Site
The solution in this guide is inspired by resources from youtube and this article. Here’s how to apply it:
Go to your Blogger dashboard, navigate to Theme - Edit HTML, and locate the </head>. Just above the </head> tag, paste the following scripts:
<style>
/* Pop-Up Box by Fineshop */
.popSc {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
z-index: 99980;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center
}
.popSc.hidden {
display: none
}
.popSc .popBo {
position: relative;
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 25px rgb(0 0 0 / 20%)
}
.popSc .popBo svg {
display: block;
width: 50px;
height: 50px;
fill: none !important;
stroke: #08102b;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5
}
.popSc .popBo h2 {
margin: 10px 0 15px 0;
font-size: 1.2rem;
font-weight: 800;
color: #08102b
}
.popSc .popBo p {
margin: 0;
line-height: 1.7em;
font-size: 0.9rem;
color: #08102b
}
.popSc .popBo .popBtn {
display: inline-flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
outline: none;
border: none;
background: #482dff;
border-radius: 50%;
margin-top: 20px;
transition: all .2s ease;
-webkit-transition: all .2s ease
}
.popSc .popBo .popBtn:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05)
}
.popSc .popBo .popBtn svg {
width: 24px;
height: 24px;
stroke: #fff;
flex-shrink: 0
}
.popSc .popBo .popBtn svg.r {
animation: rotateIcn 1.5s infinite linear;
-webkit-animation: rotateIcn 1.5s infinite linear
}
.popSc {
animation: popupBlur .3s ease-in;
-webkit-animation: popupBlur .3s
}
.popSc>* {
animation: popupScale .3s ease-in;
-webkit-animation: popupScale .3s
}
.darkMode .popSc {
background: rgba(0, 0, 0, 0.1)
}
.darkMode .popSc .popBo {
background: rgba(50, 50, 50, 0.8)
}
.darkMode .popSc .popBo svg {
stroke: #fefefe
}
.darkMode .popSc .popBo p,
.darkMode .popSc .popBo h2 {
color: #fefefe
}
@keyframes popupBlur {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes popupBlur {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes popupScale {
from {
transform: scale(0);
animation-timing-function: ease-in;
opacity: 0
}
to {
transform: scale(1);
opacity: 1
}
}
@-webkit-keyframes popupScale {
from {
-webkit-transform: scale(0);
-webkit-animation-timing-function: ease-in;
opacity: 0
}
to {
-webkit-transform: scale(1);
opacity: 1
}
}
@keyframes rotateIcn {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
@-webkit-keyframes rotateIcn {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(359deg)
}
}
</style><script>
/*<
*/
(function () { const n = document, o = n.head; var t = "pointer-events: none; height: 1px; width: 0; opacity: 0; visibility: hidden; position: fixed; bottom: 0;"; const a = n.createElement("div"), s = n.createElement("div"), d = n.createElement("ins"); a.id = "div-gpt-ad-3061307416813-0", a.style = t, s.className = "textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox ads", s.style = t, d.className = "adsbygoogle", d.style = "display: none;"; const i = { allowed: null, elements: [a, s, d] }; this.checkAdsStatus = function (t) { const e = n.body; "function" == typeof t && ("boolean" == typeof i.allowed ? t(i) : (e.appendChild(a), e.appendChild(s), e.appendChild(d), setTimeout(function () { if (0 === a.offsetHeight || 0 === s.offsetHeight || d.firstElementChild) i.allowed = !1, t(i); else { const e = n.createElement("script"); e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", e.async = !0, e.crossOrigin = "anonymous", e.onload = function () { i.allowed = !0, t(i) }, e.onerror = function () { i.allowed = !1, t(i) }, o.appendChild(e) } a.remove(), s.remove(), d.remove() }, 40))) } }).call(this);
function antiAdBlockerHandler() {
window.checkAdsStatus(function (ads) {
if (!ads.allowed) {
// Ads are Blocked
console.log("%c[ADS]", "color:#d32f2f;", "Blocked");
const icon = "";
const title = "Ad blocker detected!";
const message = "We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
";
// Lets create the popup
const element = document.createElement("div");
element.className = "popSc";
element.innerHTML = "" + icon + "" + title + "
" + message + ""
document.body.appendChild(element);
} else {
// Ads are allowed;
console.log("%c[ADS]", "color:#43a047;", "Allowed");
}
});
document.removeEventListener("DOMContentLoaded", antiAdBlockerHandler);
};
if (document.readyState === "complete" || document.readyState !== "loading") {
antiAdBlockerHandler();
} else {
document.addEventListener("DOMContentLoaded", antiAdBlockerHandler);
}
/*]]>*/
</script>And that’s it! With this simple tweak, you’re taking a proactive step toward protecting your ad revenue while educating your audience about the importance of ads for sustaining your website.
Happy blogging!
No comments
Post a Comment