detect adblock installed or not

7 files changed, 86 insertions, 1 deletions

diff --git a/README-zh.md b/README-zh.md
index a884df4..1c9fba2 100644
--- a/README-zh.md
+++ b/README-zh.md
@@ -6,6 +6,7 @@
 
 
 
+
 # Hugo W3 SIMPLE
 
 
@@ -33,6 +34,7 @@
  - 辉光式LOGO，可选
  - Cookie设置提醒，根据欧盟法律需显示提示站点采用cookie。
  - Google Adsense autoads
+ - 反反广告插件支持，滑屏2000px若检测到用户装有adblock，则弹出提醒窗口。
  - Lazy Load图片 -  异步加载网站上的图像 - 也就是说先用一个极小的图像文件占住位置，只有当用户滑动屏幕到该图片出现的位置时，才调用真实的图片。 如果页面有很多图片，启用此功能可以使页面加载速度非常快。 [实例演示](https://jesselau.com/21-wordpress-plugins-activated-in-my-website/). 这个网页含有21个图片。不用lazy load前文件大小为854kb，加载时间3.5s.![Before lazy load](https://raw.githubusercontent.com/jesselau76/hugo-w3-simple/master/images/beforelazyload.png)使用lazy load后文件大小为524kb，加载时间就只有2.8s
 ![After lazy load](https://raw.githubusercontent.com/jesselau76/hugo-w3-simple/master/images/afterlazyload.png)
 
diff --git a/README.md b/README.md
index 1652cae..107ce68 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@
  - Glowing style logo
  - Scroll indicator
  - Google Adsense autoads
+ - Detect adblock and display allow ads notice on scrolling over 2000px if the users have adblock installed.
  - Cookie law support.
  - Lazy Load images -  loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser's viewport. This means that if users don't scroll all the way down, images placed at the bottom of the page won't even be loaded. Enable this function to make the page load very fast if it has lots of images. [Live Demo Here](https://jesselau.com/21-wordpress-plugins-activated-in-my-website/). This page includes 21 images. Before lazy load the page size is 854kb and load time is 3.5s.![Before lazy load](https://raw.githubusercontent.com/jesselau76/hugo-w3-simple/master/images/beforelazyload.png)After lazy load the page size is 524kb and load time is 2.8s
 ![After lazy load](https://raw.githubusercontent.com/jesselau76/hugo-w3-simple/master/images/afterlazyload.png)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9af0599..9806712 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -98,6 +98,7 @@ contentDir = "content/chinese"
     description = "Hugo W3 Simple Theme"
     onesignalid = ""  #one signal push app id
     # adsenseid="ca-pub-123456789"
+    allowads = true
     logotext = "HUGO W3 SIMPLE" # logo text
     footer = "© [John Doe](https://johndoe.com) 2018 | [Github](https://github.com/johndoe) | [Twitter](https://twitter.com/johndoe)  | [RSS](/index.xml)"
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8707362..763dcea 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -224,6 +224,14 @@ function scrollFunction() {
     
 
     {{ end }}
+
+    <!-- allowads -->
+    {{ if and (.Site.Params.allowads) (.IsPage) }}
+       if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
+          detectads();
+       } 
+
+    {{ end }}
 }
 
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6d156b8..4c30e39 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -14,7 +14,7 @@
     );
   }
 </script>
-<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+<script async src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 {{ end }}
 
   {{ if .Site.Params.searchfunction }}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index e2b2aad..190586e 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -155,7 +155,49 @@
       </script>
   {{- end -}}
 
+   <!-- allowads -->
+  {{ if  (.Site.Params.allowads) }}
+
+      <div id="wrapads">
+        <div class="adBanner">
+         
+        </div>
+       </div>
+      
+      <div id="allowads" class="allowads-overlay">
   
+        <div class="allowads-overlay-content">
+        <div class="w3-panel w3-pink w3-large">
+        
+
+         <p> We notice you're using an adblocker.  If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!</p>
+         
+          <div class="w3-btn w3-green"  onclick="closeOverlay()">I've whitelisted your website.</div><br>
+          <div class="w3-button w3-small"  onclick="closeOverlay()">Not now</div>
+        </div>
+        </div>
+      </div>
+
+      <script>
+      function closeOverlay() {
+        document.getElementById("allowads").style.width = "0%";
+        document.getElementById("wrapads").style.height="1px";
+      }
+
+      function detectads() {
+      var h = document.getElementById("wrapads").clientHeight;
+
+      if (h==0){ document.getElementById("allowads").style.width = "100%";
+      }
+      }
+      
+
+     
+      
+      </script>
+
+  {{- end -}}
+
 
 
 
diff --git a/static/css/style.css b/static/css/style.css
index 20db3fe..97be321 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -367,3 +367,34 @@ position: fixed;
    
 }
 
+/* allowads */
+
+.adBanner {
+    
+    height: 1px;
+    width: 1px;
+}
+
+.allowads-overlay {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    background-color: rgb(255,255,255);
+    background-color: rgba(255,255,255, 0.9);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.allowads-overlay-content {
+    position: relative;
+    top: 25%;
+    width: 61.8%;
+    text-align: center;
+    margin-top: 30px;
+    margin-left:auto;
+    margin-right:auto;
+    
+}
\ No newline at end of file