Responsive Adblock Notification Bar Without a Plugin

Responsive Adblock Notification Bar Widget For WordPress.Nowadays Adblock users are Increasing day by day really it is sad news for Bloggers recently @erickschonfeld posted about on his twitter page

420 million people use ad blockers, most of those on mobile, up 94% in 2015. Mary Meeker #Internettrends pic.twitter.com/syk0L64PQ3
— Erick Schonfeld (@erickschonfeld) June 1, 2016

Most of the bloggers Question is there Anyway to came from adblocker blocking but Most of them using some Adblock detect pop up script and plugins It really annoying your website visitor’s Most of them asking me to create a bypass script to shown an Ad’s in adblocker enabled browser’s and devices but I won’t recommend that methods it’s against the ad policy here the simple solution for this Display Responsive Adblock Notification Bar on your WordPress website without plugins.

Responsive Adblock Notification bar Widget

Responsive Adblocker Notify Plugin for WordPress and blogger.

Version – 1.1

Developer – Srinivas Tamada (9lessons.info)

Modified and Wp Plugin by – Santhosh veer

Supported Platforms – WordPress, Blogger and Custom Designed Static and Dynamic website.

Changelog – 1.1 Add Google Analytics Tracking

100 % Fluid Responsive Bar
User-Friendly it’s not Annoying your Blog visitor’s
Mobile Hide Option
Pure CSS Adblock Notice plugin it will not affect your website loading Speed

Just Follow our Below steps to install the Adblock Notify Plugin in your WordPress and Blogger blog

How to Install Adblock Notification bar Widget in WordPress website?

WordPress User Follow this Github Thread Tutorial

Demo Image

Adblock Notification Bar

Add Custom CSS

Learn How to Add Custom CSS in your WordPress website

How to Install the Adblocker Notification Widget on Blogger blog

Login to your Blogger Dashboard
Go to Template
Click Edit Html for Open the Template Editor
Use CTRL + F to Find ]]></b:skin>
Paste the Below CSS Code just above ]]></b:skin> tag

/**************** Responsive Adblock Notification Bar  ***************/
 #ab-msg {
display: none;
text-align: center;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #e74c3c; 
color: #FFF;
padding: 10px;
z-index: 999999;
font-size: 16px;
}
#ab-msg p {
 margin: 0 20px;
 display: inline-block;
}
#ab-msg a, #ab-msg a:visited {
text-decoration: none;
color: #FFC107;
border-bottom: 1px dotted;
transition: 200ms color;
}
#ab-msg a:hover, #ab-msg a:active {
color: #b2f7ff;
}
/**************** Hide on Mobile ***************/
 @media only screen and (max-width:480px) {
 .hide_on_mobile {
 display: none !important;}
 }

Replace #e74c3c; With your Favourite background Color
Now Find </head> Tag Paste the Below Javascript code above the </head> tag

<script>
function adBlockFunction()
{
// Google Analytics Tracking 
setTimeout(function() { 
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
// Google Analytics End

document.getElementById('ab-msg').style.display = 'block';
}
</script>

Final Step Now Search the <body> tag paste the Below Html Tag below <body> tag

<div id='ab-msg' style='display: none;'>Disable Adblocker For <a href="Your Blog Url">Your Blog Name</a>

Replace Your Blog Url & Your Blog Name with your Blog URL and Name.
That’s all Click Save Template.
Very Important Step Now add this (On error) Event Function code on your Ad slot’s External Script Source.
Add this script on Anyone your Ad slot.Don’t add this on your all Ad slots Check Below Image

Adblock Notification Bar

That’s Successfully we Installed the Responsive Adblocker Notification plugin for Blogger blog.

Add Custom HTML tags on </head>

Learn How to Add HTML TAGS in above </head> tag WordPress website

Optional Method

Hide this Notification bar on your Mobile Device just Add this class=”hide_on_mobile” on the HTML Notification Tag

<div class="hide_on_mobile" id='ab-msg' style='display: none;'>Disable Adblock for yourwebsite.com</div>

That’s all Successfully we install the Responsive Adblock Notification Bar in our WordPress website.

From the Editor’s Desk

Now you can Show the Responsive Adblock Notify to your website visitors.this Adblock plugin Notification will help to improve you user experience without annoying your website visitors.

Was this article helpful?

Yes, thanks!

Not really

Thanks!

Your feedback helps us improve Allwebtuts.com