AMP Ad Blocker Blogger Plugin | Ads Blocker Alert Notification

The AdBlock Plus app has become a scourge for blog and website administrators and a web travel companion for visitors. After the desktop application, it is also included in smartphone applications such as Android and Apple. So, a blow to bloggers came from smartphone apps.

There is a reason why blog visitors also use AdBlock. When you log in to some blogs and websites, you may have to pass many ad barriers by fighting an ad closing battle before you even see the home page.

Against the AdBlock application, blogs and webmasters have also started using the AdBlock shutdown notification plugin. I don't know how successful it will be, but there is no need to go too far to avoid breaking some rules.

It is useful to carefully use the AdBlock closure notification plugin, which is thought to be somewhat useful, especially for Adsense users. The reason is that you can be penalized by Google at any time. Actually, I always thought about Google disabling AdBlock for Adsense ads. It is also thought-provoking that Google Adsense, which earned millions of dollars, did not solve this problem. For trusted and HTTPS compatible blogs and websites, it can disable AdBlock's Adsense ad-blocking feature.

For AMP HTML users, there are not many options for this and similar issues. Now, follow the steps below to use the AdBlock app shutdown notification plugin on AMP HTML blogs and websites.

How to Install AMP AdBlock Application Shutdown Notification Plugin?

Add the following AMP javaScript codes one line above your blog's code. If your blog contains the following codes in the AMP JavaScript library, there is no need to add them again.

<script async="" custom-element="amp-analytics" src="https://cdn. ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async="" custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script> 

Add the following CSS codes into the amp-custom='amp-custom' file that creates your blog's style file.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box -sizing:border-box}
.notifbox{display:block}
.notif_box{position:relative;background:rgba(213, 0, 0, 0.75);color:#fff;font-family:Roboto,sans-serif;padding:0;transition:all .3s ease-in-out; width:100%;margin:0 auto;border-radius:0;overflow:hidden}
.notif_box p.note{text-align:center;margin:0;padding:15px 40px;font-size:12px;font-weight:400;line-height:1.5}
.notif_box p a {color:#f0c36d;text-decoration:underline}
.notif_box p a:hover{color:#f9edbe}
.notifbox .close_notifbox{background:0 0;border-radius:0.3rem;border:1px solid;padding:0.3em 0.6em 0.2em 0.6em;color:#fff;font-size:1em;position:absolute;top: 10px;right:10px;cursor:pointer;line-height:15px;text-align:center;z-index:2}
.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:0}
.notifbox .close_notifbox:hover{color:#f9edbe}

Add the following HTML code one line above the </body> code.

<amp-user-notification id="block-notification" layout="nodisplay">
<div class="notifbox" id="notifbox">
<div class="notif_box">
<button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&amp;times;</button>
<p class="note">Please disable AdBlock or similar apps that may block ads so that we can better serve you and support our site. You may encounter this warning constantly as long as you do not disable applications that block ads.<br/>For more information <a href="https://bloggereklentileri.blogspot.com/p/blogger-addons-privacy- policy.html" target="_blank">here</a> Click. To avoid seeing the warning again <a href="#" on='tap:block-notification.dismiss' role='button' tabindex='0' title='Close'>here</a> click.</p>
</div>
</div>
</amp-user-notification>

Add your own blog link instead of the link in the HTML code above.

If your blog does not contain amp-analytics (Google Analytics) code, add the following AMP HTML amp-analytics one line above </body> .

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"var": {
"account": "UA-xxxxxxxxxx"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}}}
</script>
</amp-analytics>

Substitute your Google Analytics account code in place of UA-xxxxxxxxxx specified in the code. If you have followed the above steps correctly on your blog, save the template.

NOTE:
The AMP AdBlock plugin uses browser cookies so that it is not displayed again if it is turned off. If your blog visitors theme/delete their browser, the AMP AdBlock plugin will be displayed again.

Conclusion

You can use the comment form for your comments, suggestions, and questions about the AMP AdBlock plugin.