How to Add Custom Material Design Box In Your Blog

Hello friends, welcome to our new post today, as we all know, there are many browsers which come with adblocker features, which are used by many users, and by blocking the ads of your website You are able to open the website so that the ads of your website are not visible here, and this also reduces your AdSense earning. So in today's article we will learn how to add Anti Adblocker features to any blogger or wordpress website.

Table of Contents

FEATURES OF ANTI AD-BLOCKER

As many people come to our website even after blocking the ads of our website, because of this, our adsense earning is less, then people who visit your website after Enabling the ads blocker extension, after applying the anti adblocker script, when Your website will not open until they close the extension , By blocking your ads, they will not be able to open them.

How to install Anti-Adblocker in Blogger

You do not need much knowledge to install Anti Adblocker in Blogger or WordPress website, about Html, CSS and Javascript, because I have already designed all this code for you, I will give you two styles here. I will give adblocker using which you can avoid adblocker extension. What you will need to implement this code, blogger

Notice! If you are going to add this code in blogger's theme xml, then I will tell you to take backup of the theme beforehand, if any kind of problem comes, to

1. First of all you have Login to your Blogger Dashboard.
2. Now you have to click in the  theme  section in blogger's dashboard.
3. Now you have to click on the bottom side which is showing you the arrow icon, after that you have to click on the  'Customize'  button.
4. After that you have to click on  Edit html  it will redirect you to theme xml
5. Now you have to search   ></b:skin>   tag and then paste your CSS code on top of it

If your template has dark mode features and you want different color, you can customize it according to your requirement, each template has different dark mode class, adjust it according to your requirement, you will have to replace Yes, the class that I have marked according to my templates darkmode class

      /* Pop-Up Box (Style 1) by Tech Shreyansh */
.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)}}
  

Now I am giving you the Ad Blocker code of another style below, you can add it too on Closing   </Head>   tag, whatever style you like, you can add it to your website.

     <style>
/* Ads blocker Code {Style 2} by TS */
  .hidden{display:none!important;}
.center { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .ADs-BG{ background: rgba(255, 255, 255, 0.58); width: 100vw; height: 100vh; position: fixed; z-index: 99999; top: 0; left: 0; } .at-adblock-content-wrapper { box-shadow: 24px 24px 48px rgba(0, 0, 0, 0.4); border-radius: 10px; max-width: 400px; background: #fff; height: auto; width: 100%; } .at-adblock-content { padding: 30px 50px; } .at-adblock-text, .at-adblock-text h3 { text-align: center; font-family: inherit; font-weight: 700; } .at-adblock-text h3 { font-size: 25px; margin-top: 1rem; } .at-adblock-text p { margin: 20px auto; font-weight: 500;font-size: 13px; } .at-adblock-button .ad-btn { line-height: 1em; border-radius: 30px; border: none; border:2px solid #b23939; padding: 10px 20px; width: 100%; background: #b23939; color: #fff; transition: 0.2s; } .at-adblock-button .ad-btn:hover { background: #fff; color: #b23939; border: 2px solid #b23939; } @media (max-width:480px){ .at-adblock-content-wrapper{max-width:300px}.at-adblock-text h3{font-size:20px}.at-adblock-text p{font-size:12px}.at-adblock-button .ad-btn{font-size:12px} }
/* end */
</style>  
  

6. Now I am giving you the javascript code of Style 1, which you may need to use  </body>  Have to paste above the tag, if you are not able to find it in this way, then it might have been forwarded, which you can search by typing  </body> 

      <script>/*<![CDATA[*/
/***Anti Ad Blocker Code by TS***/

(function(key){const data={allowed:null},url="https://cdn.jsdelivr.net/gh/fineshop/plus-ui@2.7.0/main/ads/adsbygoogle.js";this[key]=function(callback){if("function"!=typeof callback)return;const called=[];function oneTimeCallback(){0===called.length&&(called.push(1),callback(data))}if("boolean"!=typeof data.allowed){let xhr=null;try{xhr=new XMLHttpRequest}catch(e){try{xhr=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{xhr=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){return}}}xhr.onreadystatechange=function(){if(xhr.readyState===xhr.DONE){if(xhr.status>=200&&xhr.status<=299){const fakeAd=document.createElement("div");fakeAd.className="textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox ads",fakeAd.style="height: 1px; width: 0; opacity: 0; visibility: hidden; position: fixed; bottom: 0",document.body.appendChild(fakeAd),data.allowed=0!==fakeAd.offsetHeight,fakeAd.remove()}else data.allowed=!1;oneTimeCallback()}},xhr.onerror=function(){data.allowed=!1,oneTimeCallback()},xhr.open("GET",url),xhr.send("")}else oneTimeCallback()}}).call(this,"checkAdsStatus");

function antiAdBlockerHandler() {
  window.checkAdsStatus(function(ads) {
    if (!ads.allowed) {
      // Ads are Blocked
      console.log("%c[ADS]", "color:#d32f2f;", "Blocked");

      const icon = "<svg style='stroke:none;fill:currentColor!important' viewBox='0 0 24 24'><path d='M12.2 9L10.2 7H13C14.1 7 15 7.9 15 9V11.8L13 9.8V9H12.2M23 9V7H19C17.9 7 17 7.9 17 9V11C17 12.1 17.9 13 19 13H21V15H18.2L20.2 17H21C22.1 17 23 16.1 23 15V13C23 11.9 22.1 11 21 11H19V9H23M22.1 21.5L20.8 22.8L14.4 16.4C14.1 16.7 13.6 17 13 17H9V10.9L7 8.9V17H5V13H3V17H1V9C1 7.9 1.9 7 3 7H5.1L1.1 3L2.4 1.7L22.1 21.5M5 9H3V11H5V9M13 14.9L11 12.9V15H13V14.9Z'/></svg>";
      const title = "Ad blocker detected!";
      const message = "<p>We have detected that you are using adblocking plugin in your browser.<br/>The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.</p>";

      // Lets create the popup
      const element = document.createElement("div");
      element.className = "popSc";
      element.innerHTML = "<div class='popBo'>" + icon + "<h2>" + title + "</h2><div class='popCo'>" + message + "</div></div>"
      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>
  

I have provided you both the codes of style 1, now I am going to tell you the javascript code of style 2, you have to Add the Style 2 Javascript first code on Open  <body>  tag.

     <div class='ADs-BG center hidden' id='ST1mar'>
      
<div class='at-adblock-content-wrapper'>
<div class='at-adblock-content'>
<div class='center'>
<div class='logo'>
<svg style='width:58px;height:58px' viewBox='0 0 24 24'>
    <path d='M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7' fill='#b23939'/>
</svg>
</div>
</div>
<div class='at-adblock-text'>
<h3>
Attention! Ad blocker Detected!
</h3>
<p>
We know ads are annoying but please bear with us here &amp; disable your ad blocker!
</p>
</div>
<div class='at-adblock-button'>
<button class='ad-btn'>
Okay
</button>
</div>
</div>
</div>
</div>
  

7. Now you need to use the closing  </body>  Have to search and just above that you have to implement style 2 javascript code.

     <script src='data:text/javascript;base64,ZnVuY3Rpb24gaW5pdCgpe2Fkc0Jsb2NrZWQoZnVuY3Rpb24obyl7bz8oJCgiI1NUMW1hciIpLnJlbW92ZUNsYXNzKCJoaWRkZW4iKSwkKCIuYXQtYWRibG9jay13cmFwcGVyIikuYWRkQ2xhc3MoImZhZGVJbiIpKTpjb25zb2xlLmxvZygiQWQtYmxvY2tlciBFbmFibGVkIDogIitvKX0pfWZ1bmN0aW9uIGFkc0Jsb2NrZWQobyl7dmFyIG49bmV3IFJlcXVlc3QoImh0dHBzOi8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL2pzL2Fkc2J5Z29vZ2xlLmpzIix7bWV0aG9kOiJIRUFEIixtb2RlOiJuby1jb3JzIn0pO2ZldGNoKG4pLnRoZW4oZnVuY3Rpb24obyl7cmV0dXJuIG99KS50aGVuKGZ1bmN0aW9uKG4pe2NvbnNvbGUubG9nKG4pLG8oITEpfSkuY2F0Y2goZnVuY3Rpb24obil7Y29uc29sZS5sb2cobiksbyghMCl9KX1zZXRUaW1lb3V0KCgpPT57aW5pdCgpfSwwKSwkKCIuYWQtYnRuIikuY2xpY2soZnVuY3Rpb24oKXtsb2NhdGlvbi5yZWxvYWQoKX0pOw==  '/>
  

8. Now you have to save by clicking on save changes, by clicking on this icon That,s All.

CONCLUSION

I have told you this whole process, how you can apply anti adblocker script, on your blogger and wordpress website, you must share this article with your friends, if you have any kind of problem in any section And if you have any question, then you can ask us in the comment box.

© Tech Shreyansh

Go to Link