MyAdviseNow
  • Home
    • Home – MAN
  • How To
  • toutorial
  • Android
  • best
  • Windows
  • IOS
  • top 10
  • Tech
No Result
View All Result
  • How To
  • toutorial
  • IOS
  • top 10
  • Tech
  • Windows
  • best
  • Android
  • Smartphone
No Result
View All Result
MyAdviseNow
No Result
View All Result
Home Guide

AdBlocker Notifier with & without CLOSE button

Ammar by Ammar
December 5, 2020
in Guide
Reading Time: 7min read
0
AdBlock killer

AdBlock Notifier with & without close button and custom message

1
SHARES
83
VIEWS
Share on FacebookShare on Twitter

Ohhh no AdBlocker, your revenue as a publisher is in danger! Your website is just getting so many pageviews and you don’t see any revenue in return. You decided to fight back with AdBlockers! Stay with MAN (MyAdviseNow) and we show you some techniques to fight back users with Adblock Plus.

What is the Effect of Adblocker on publisher?

Adblockers are extensions that can be installed on the user’s browser. These extensions can block advertisements on websites and help users to consume less data and load the pages faster. Though it helps the front users, it kills the revenue of publishers. Publishers mostly rely on the income of ads and if they don’t deliver any click or impression, they will not be paid. That’s why most publishers are searching for Scripts and Plugins to detect adblocker and notify Adblock users.

Related Articles

8 Ways to Make Money While You Sleep

8 ways to earn money while you are asleep | 2021 Update

February 21, 2021
what should be on the homepage of a website

5 Home-page Design Tips Everyone should know

February 17, 2021
guest posts on your website

Why should you have guest posts on your website?

February 16, 2021
SEO strategy for skyscraper content

SEO strategy for long-form content: 10+1 key points (Skyscraper content) | 2021

February 14, 2021

Ad blockers effect on advertising ecosystem and publishers revenue.

MAN

How to detect adblocker s and show them a custom message:

There are many ways to show a custom notification to website users. Webmasters who use WordPress as their CMS can easily install plugins. but they can do it with some proper scripts.

2 Best Free Anti-Adblock Plugins for WordPress:

  1. Ad Blocker Notify Lite
  2. deAdblocker

If you are using WordPress you can easily install the plugins from the given links. (click on them, they navigate you to plugin homepage in WordPress.org.

I prefer AdBlocker Notify Lite as it has a dismissible option. This means the users will not be able to use your site if they don’t turn their AdBlock off or white list your domain address. DeAdblocker shows just a simple notification with a custom message which can be easily ignored by users. It cants hide your content from users who are using adblockers.

How to show a custom message to AdBlock users by scripts?

Well, it sounds better. The custom script will not slowdown your webpage.

Creating a custom notification for AdBlock users and ask them to turn off their adblocker with the close button:

This type of notification doesn’t affect your users much. They easily close and dismiss the message. It cants force them to turn-off the adblocker or white list your domain. It simply shows your custom message to visitors who use adblocker.

Step one:

Copy the below code and save it as adframe.js

var adblock = false;

than upload it to your root folder of your host. (by using WebFTP or FileZilla.)

Step two:

Copy the below code and add it to your header section of your site. Between <header></header>.

<script type="text/javascript">
 var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
if(adblock) 
{
 alert("You should disable your adblock");
 document.getElementById("wrapper").style.display="none";
}
</script>

You can change the alert message by changing ” You should disable your AdBlock “. just change the text in the quotation mark. It will show your custom message to users with adblockers.

Creating a custom notification for AdBlock users and FORCE them to turn off their adblocker WITHOUT the close button:

Here you can see the screenshot of the notification for AdBlocker
AdBlocker notification without close button

It is painful when you visit a website and it forces you to turn off or whitelist their domain address from adblocker settings. But we should respect the publisher’s choice. The user will decide to leave your site or change the adblocker settings. This type of notification hides your content for users using adblockers.

Step one:

Add the below script to your header.php between <header></header>.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* Style for sample Disable Adblock Notify Message. Remove if not using */

#blockedmessagewrapper{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	z-index: 100000;
	visibility: hidden;
	align-items: center;
	justify-content: center;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

#blockedmessagewrapper:after{
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
	background: rgba(0,0,0,.7);
}

#blockedmessageinner{
	width: 90%; /* width and max width settings */
	max-width: 450px;
	padding: 20px;
	z-index: 100000;
	overflow: hidden;
	background: white;
	-webkit-transform-origin: 50% 0;
	        transform-origin: 50% 0;
}

#blockedmessageinner .title{
	text-transform: uppercase;
	color: #E20000;
	font-size: 2em;
	margin-bottom: 6px;
	display: block;
}

#blockedmessageinner > div{
	border-left: 6px solid #E20000;
	padding-left: 10px;
	line-height: 2;
}

#blockedmessageinner #dismissmsg2{
	float: right;
	margin-top: 15px;
	margin-right: 5px;
	cursor: pointer;
	text-transform: uppercase;
	color: #E20000;
	background: #eee;
	border-radius: 8px;
	padding: 3px 5px;
	box-shadow: 0 0 3px gray;
	font-size: 14px;
}

#blockedmessagewrapper.showmsg{
	visibility: visible;
}

#blockedmessagewrapper.showmsg #blockedmessageinner{
	-webkit-animation: swing forwards 2s;
	-moz-animation: swing forwards 2s;
	animation: swing forwards 2s;
}

@-webkit-keyframes swing{
	0%{-webkit-transform:rotate(0deg);}
	20%{-webkit-transform:rotate(-15deg)}
	40%{-webkit-transform:rotate(10deg)}
	60%{-webkit-transform:rotate(-7deg)}
	80%{-webkit-transform:rotate(5deg)}
	100%{-webkit-transform:rotate(0deg)}
}

@keyframes swing{
	0%{transform:rotate(0deg)}
	20%{transform:rotate(-15deg)}
	40%{transform:rotate(10deg)}
	60%{transform:rotate(-7deg)}
	80%{transform:rotate(5deg)}
	100%{transform:rotate(0deg)}
}


</style>

<script>

;(function(){

	// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/

	var debug = false // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page

	// Main Adblock Detect function
	// When Ad Blocker detected
	// Adds "adblocked" CSS class to HTML root element 
	// Calls function adblockaction()

	var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found

	document.addEventListener('DOMContentLoaded', function(){
		var testunit = document.createElement('div');
		testunit.innerHTML = '&nbsp;';
		testunit.className = targetclass;
		document.body.appendChild(testunit);
		setTimeout(function() {
		  if (testunit.offsetHeight === 0 || debug) {
				if (typeof adblockaction == 'function'){
					adblockaction()
				}
		    document.documentElement.classList.add('adblocked');
		  }
		  testunit.remove();
		}, 400);
	})

	// adblockaction function that gets called when Adblock is enabled:

	function adblockaction(){
		var msg = document.getElementById('blockedmessagewrapper');
		var dismiss = document.getElementById('dismissmsg2');
		msg.classList.add('showmsg');
		dismiss.addEventListener('click', function(){
			msg.classList.remove('showmsg');
			document.documentElement.classList.remove('adblocked');
		})
	}

})();

</script>

</head>

<body>
<!-- Add the below outside any tag other than the BODY -->
<div id="blockedmessagewrapper">
	<div id="blockedmessageinner">
		<b class="title">Oh nooo, You use Adblocker!</b>
		<div>
			Your Adblocker is active! <b>AdBlocker</b> And it is preventing us to show you our content.
		</div>
	</div>
</div>


</html>

You can also add a dismiss (close) button to it by adding the below code to script:

<b id="dismissmsg2">Dismiss (Remove On Production)</b>

After adding the code the script will look like below:

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* Style for sample Disable Adblock Notify Message. Remove if not using */

html.adblocked body:after {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99999;
	background: rgba(0,0,0,.7);
}

#blockedmessage{
	bottom: 0;
	left: 0;
	position: fixed;
	width: 100%;
	padding: 10px;
	border: none;
	font-size: 1em;
	background: #FFE2E2;
	font-family: Georgia;
	z-index: 100000;
	line-height: 1.5;
	border: 1px solid #eee;
	border-top: 8px solid darkred;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
	visibility: hidden; /* By default, hide this message from non ad blocking users. Use visibility instead of display so the message can be animated into view using CSS3 */
	-webkit-transform: translate3d(0px, 110%, 0px);
	transform: translate3d(0px, 110%, 0px);
	-webkit-transition: transform .5s, visibility 0s .5s;
	transition: transform .5s, visibility 0s .5s;
}

#blockedmessage .title{
	text-transform: uppercase;
	color: #E20000;
	font-size: 1.1em;
	margin-bottom: 6px;
	display: block;
}

#blockedmessage > div{
	border-left: 6px solid #E20000;
	padding-left: 10px;
}

#blockedmessage #dismissmsg{
	float: right;
	margin-top: 5px;
	margin-right: 5px;
	cursor: pointer;
	text-transform: uppercase;
	color: #E20000;
	background: #eee;
	border-radius: 8px;
	padding: 3px 5px;
	box-shadow: 0 0 3px gray;
	font-size: 14px;
}

#blockedmessage.showmsg{
	visibility: visible; /* Use visibility instead of display so the message can be animated into view using CSS3 */
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	-webkit-transition: transform .5s;
	transition: transform .5s;
}


</style>

<script>

;(function(){

	// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/

	var debug = false // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page

	// Main Adblock Detect function
	// When Ad Blocker detected
	// Adds "adblocked" CSS class to HTML root element 
	// Calls function adblockaction()

	var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found

	document.addEventListener('DOMContentLoaded', function(){
		var testunit = document.createElement('div');
		testunit.innerHTML = '&nbsp;';
		testunit.className = targetclass;
		document.body.appendChild(testunit);
		setTimeout(function() {
		  if (testunit.offsetHeight === 0 || debug) {
				if (typeof adblockaction == 'function'){
					adblockaction()
				}
		    document.documentElement.classList.add('adblocked');
		  }
		  testunit.remove();
		}, 400);
	})

	// adblockaction function that gets called when Adblock is enabled:

	function adblockaction(){
		var msg = document.getElementById('blockedmessage');
		var dismiss = document.getElementById('dismissmsg');
		msg.classList.add('showmsg');
		dismiss.addEventListener('click', function(){
			msg.classList.remove('showmsg');
			document.documentElement.classList.remove('adblocked');
		})
	}

})();

</script>

</head>

<body>

<!-- Add the below outside any tag other than the BODY -->
<div id="blockedmessage">
	<b class="title">Oh oh, Ad Block Alert!</b>
	<div>
		It looks like you've enabled <b>Ad Blocking</b> on our site. Please enable ads on this site to continue, as Dynamic Drive relies solely on ads to keep producing and offering free content to you.
		<b id="dismissmsg">Dismiss (Close)</b>
	</div>
</div>


</html>

source of codes: dynamicdrive

Conclusion:

Revenue from ads is very important to most website owners. They create content to earn money. Adblockers are just decreasing the amount of publishers’ revenue. The mentioned techniques will help you to fight back with adblockers. If you know any other method, please make me happy and share it with me.

Tags: adblocker killeradblocker plusanti adblockeranti adblocker litebest wp plugins for antiadblockdeadblocker pluginfree pluginhow to force a user stop using adblockerhow to hide content for adblockersincrease ad incomeprevent adblock users to access my contentscript for custom messagescript to notify adblocker detection
ShareTweetSharePin1ShareShareSendShareSend
Previous Post

earn money online – Strategies and mistakes

Next Post

Converter – Convert any file for free, yt to mp3

Ammar

Ammar

Related Posts

8 Ways to Make Money While You Sleep

8 ways to earn money while you are asleep | 2021 Update

by Ammar
February 21, 2021
0

Does your money increase when you are asleep? Wouldn't that be great if that was true? Since we are still...

what should be on the homepage of a website

5 Home-page Design Tips Everyone should know

by Ammar
February 17, 2021
1

Designing your front page ( Home-Page ) is very important, as it is one of the most important steps in...

guest posts on your website

Why should you have guest posts on your website?

by Ammar
February 16, 2021
0

An important part of site management goes back to updating your audience information with new and fresh content. All webmasters...

SEO strategy for skyscraper content

SEO strategy for long-form content: 10+1 key points (Skyscraper content) | 2021

by Ammar
February 14, 2021
0

Is generating long-form content (Skyscraper content) a part of your SEO strategy? Ever written a piece of content or a long...

increase website traffic

Increase website traffic organically: 25 Ways (2021)

by Ammar
February 12, 2021
0

Attracting more traffic ( increase website traffic ) to the site is one of the main tasks of the site...

Load More

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
how to create a YouTube channel

The best free online YouTube Cutter and converter

December 7, 2020
Ad-Networks with INSTANT APPROVAL

Ad-Networks with INSTANT APPROVAL

December 18, 2020
make money from home

Make Money From Home And Online

July 29, 2019
Download Videos From Youtube

How to Download Videos From Youtube

October 6, 2019
Ad-Networks with INSTANT APPROVAL

Ad-Networks with INSTANT APPROVAL

5
Create a youtube channel

How to Create a youtube channel

3

3 Digital Marketing Gurus, You Should Follow Religiously

2
What is the best way to increase the quality of sound on Android phones?

What is the best way to increase the quality of sound on Android phones?

1
8 Ways to Make Money While You Sleep

8 ways to earn money while you are asleep | 2021 Update

February 21, 2021
what should be on the homepage of a website

5 Home-page Design Tips Everyone should know

February 17, 2021
guest posts on your website

Why should you have guest posts on your website?

February 16, 2021
SEO strategy for skyscraper content

SEO strategy for long-form content: 10+1 key points (Skyscraper content) | 2021

February 14, 2021
  • About
  • Privacy Policy
  • Contact Us
  • Join our YouTube channel
Address: Quetta, Balochistan, Hazaratown.

© 2019 MyAdviseNow MyAdviseNow .

No Result
View All Result
  • About Us
  • Contact Us
  • Health
  • Home
  • Privacy Policy

© 2019 MyAdviseNow MyAdviseNow .