Cara Menambahkan Anti AdBlocker

Admin

Hallo Semua! Selamat datang di onnews.my.id.

Seperti yang kita ketahui, sebagian besar pengguna browser populer memiliki fitur AdBlocker, yang digunakan oleh banyak pengguna saat ini.

Anti AdBlocker for Blogger
© onnews | Anti AdBlocker untuk theme Blogger

Pada kesempatan ini, admin akan menambahkan Anti AdBlocker ke dalam Blogger

Cara Menambahkan Anti AdBlocker?

Menambahkan Anti AdBlocker ke theme Blogger tidaklah memerlukan banyak pengetahuan tentang HTML, CSS atau JS karena admin sudah menyiapkan untuk kamu. Yang perlu kamu lakukan adalah menerapkan kode di tempat yang tepat di XML Tema Blogger Anda.

Perlu di Ingat!Sebelum kami mulai menambahkan kode dalam XML, saya akan merekomendasikan Anda untuk mengambil Cadangan dari tema Anda saat ini. Kebetulan jika terjadi masalah, Anda dapat memulihkannya nanti.

Langkah 1: Pertama silahkan Login pada blog kamu Blogger Dashboard.

Langkah 2: pada Blogger Dashboard, Silahkan Theme.

Langkah 3: Kliklah icon seperti gambar disamping Kemudian Pilih 'customize' button.

Langkah 4: klik Edit HTML, kamu akan diarahkan ke halaman penyuntingan.

Langkah 5: Sekarang carilah code berikut ini ]]></b:skin> dan paste CSS di atas code tersebut.

Jika template Anda memiliki fitur mode gelap, dan jika Anda menginginkan warna yang berbeda saat dalam mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan Anda. Setiap template dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan, Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap template Anda.

/* Pop-Up Box (Style 1) by Fineshop */
.popSc{position:fixed;z-index:99981;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.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:#f3f5fe;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;flex-shrink:0;opacity:.8}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}
.darkMode .popSc .popBo{background:#2c2d31}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo  h2{color:#fefefe}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}

Tambahkan CSS berikut alih-alih menambahkan CSS yang disediakan di atas untuk mendapatkan tampilan alternatif dengan Blur Effect.

Baca Juga : 
/* Pop-Up Box (Style 2) 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)}}

Langkah 6: Sekarang tambahkan berikut ini Javascript di atas </body> tag. Jika Anda tidak menemukannya, mungkin sudah di Parse &lt;/body&gt;.

<script>/*<![CDATA[*/
(function(key){const data={allowed:null},url="https://cdn.jsdelivr.net/gh/fineshop/plus-ui@2.7/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>

Langkah 7: Selanjut yang Terakhir, Simpan perubahan dengan mengklik ikon ini

Selesai!

Kesimpulannya

Ini semua tentang menambahkan Anti AdBlocker ke Situs Web Blogger. Saya harap Anda menikmati artikel ini. Tolong bagikan artikel ini. Dan jika Anda menghadapi masalah di bagian mana pun atau Anda memiliki pertanyaan, tanyakan kepada kami di kotak komentar. Terima kasih!

0 Comments

komentar yang tampil sepenuhnya tanggung jawab komentator seperti yang diatur UU ITE