What tutorial do you want for the next article! Request Here!

Cara Menambah Widget Anti Ad Blocker Di Blogger

Cara Membuat Widget Anti Adblok Di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara Menambahkan Widget Ad Blocker Di Blogger.

untuk demonya kalian bisa melihat melalui tombol di bawah ini

Cara Membuat Menambahkan Widget AdBlocker Di Blog

Step 1: Silahkan Kalian Masuk Blogger

Step 2: Pilih Tema Dan Edit Html

Step 3: Cari Kode ]]></b:skin> dan letakan Kode CSS berikut tepat di atasnya

Semua Template Memiliki Class Dark Mode Yang Berbeda Silahkan Sesuaikan Class Nya Dengan Template Anda ( Class DarkMode Sudah Ditandai )

/* Pop-Up Box (Style 1)*/
.Adp{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.Adp.hidden{display:none}
.Adp .Adpo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.drK .Adp{background:#1f1f1f}
.drk .Adp .Adpo{background:#2c2d31}
.drK .Adp .Adpo svg{stroke:#fefefe}
.drK .Adp .Adpo p, .drK .Adp .Adpo  h2{color:#fefefe}

Tambahkan Css Berikut Untuk Style 2 Adblocker

/* Pop-Up Box (Style 2) */
.Adp{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.Adp.hidden{display:none}
.Adp .Adpo{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%)}
.Adp .Adpo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.Adp .Adpo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.Adp .Adpo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.Adp{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.Adp >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.drK .Adp{background:rgba(0, 0, 0, 0.1)}
.drK .Adp .Adpo{background:rgba(50, 50, 50, 0.8)}
.drK .Adp .Adpo svg{stroke:#fefefe}
.drK .Adp .Adpo p, .drK .Adp .Adpo 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}}

Step 5: Sekarang tambahkan Kode Html berikut tepat di atas untuk </body>. Jika Tidak Dapat Menemukan Code Tersebut Kalian Bisa Cari Code Berikut<!--</body>--></body> atau &lt;/body&gt;

<!--[ Anti Ad-Blocker]-->
<div id='AdB' class='Adp hidden'>
  <div class='Adpo'>
    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>
    <h2>Ad-Blocker Detected!</h2>
    <p>Maaf, Matikan Ad Block Anda Untuk mengakses Website Ini.<br/>Terimakasih</p>
  </div>
</div>

Step 6: Tambahkan Code JavaScript berikut tepat di Bawah Kode Html Yang Sudah Kalian Copy Di Step 5

<script>/*<![CDATA[*/ /* Anti Ad-Blocker (NoLazy)*/ !function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden")}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(); /*]]>*/</script>

Jika Anda memakai LazyLoad Adsense Anda bisa menggunakan Script dibawah ini

<script>/*<![CDATA[*/ /* Anti Ad-Blocker (Lazyload) */ var lazyAnti=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnti||0!=document.body.scrollTop&&!1===lazyAnti)&&(!function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden");window.lazyAnti=!0}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyAnti=!0)},!0); /*]]>*/</script>

Step 7: Terakhir,Klik Icon Simpan

ok jadi sekian Cara Menambah Widget Anti Ad Blocker Di Blogger semoga bermanfaat, dan terima kasih sudah berkunjung.

Referensi:
https://blog.fineshop.eu.org

Post Tags

blogger Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

3 komentar

  1. https://1.bp.blogspot.com/-imtPwju5Z6M/Yd-uC_9GPfI/AAAAAAAAGe4/dzL72iIMfLQIMwVmc1Yj7TelXyF1zj2xgCNcBGAsYHQ/20220113_114255.jpg
    1. Test
  2. Test
AdBlock Detected!
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.