Jak dodać Anty Adblock na swojej stronie
Jak wiemy, większość popularnych przeglądarek posiada funkcję AdBlocker, z której korzysta obecnie wielu użytkowników.
W tym artykule dodamy Anti AdBlocker do dowolnej witryny Bloggera.
Ostatnia aktualizacja : 12 sierpień 2023
Jak dodać Anti AdBlocker?
Dodanie Anti AdBlocker do Bloggera nie będzie wymagało dużej wiedzy na temat HTML, CSS czy JS, ponieważ już go dla Ciebie zaprojektowałem. To, co musisz zrobić, to zaimplementować kody we właściwym miejscu w kodzie XML motywu Bloggera.
Uwaga !
Zanim zaczniemy dodawać kody w formacie XML, polecam wykonanie kopii zapasowej bieżącego motywu. Jeśli podczas edycji kodu wystąpi jakiś problem, możesz przywrócić poprzednią wersję z utworzone kopii.
Krok 1: Przede wszystkim zaloguj się do pulpitu nawigacyjnego Bloggera.
Krok 2: W panelu Bloggera kliknij Motyw.
Krok 3: Kliknij ikonę strzałki w dół obok przycisku „dostosuj”.
Krok 4: Kliknij Edytuj HTML, zostaniesz przekierowany na stronę edycji.
Krok 5: Teraz wyszukaj kod ]]></b:skin> i wklej następujące kody CSS tuż nad nim.
/* 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 ;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)}}
Styl 1
Alternatywny wygląd z efektem rozmycia.
/* 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 ;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)}}
Styl 2
Krok 6: Teraz dodaj następujący kod JavaScript nad tagiem </head>Jeśli go nie znajdziesz, prawdopodobnie został już przeanalizowany, czyli </head>.
<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 = "<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>Krok 7: Na koniec zapisz zmiany .
Gotowe!
Wszystko polega na dodaniu modułu Anti AdBlocker do witryny Bloggera. Mam nadzieję, że spodoba Ci się ten artykuł.
Prosimy o udostępnienie tego artykułu, a jeśli napotkasz problem w dowolnej sekcji lub masz jakieś pytania, zapytaj nas w polu komentarza.
Dziękuję!
© Prawa autorskie: www.fineshopdesign.com