Responsive Adblock Notification Bar Without a Plugin


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

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

 

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 UrlYour 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.

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?
Thanks!

Your feedback helps us improve Allwebtuts.com



31 Shares
+11
Tweet
Share29
Pin1
Stumble