[jQuery] 애드센스 광고차단(Adblock)시 알림창 만들기(특정 클래스 제외시)

안녕하세요. 특정 클래스 제외 하는 방법을 찾다가 재밌는 코드를 발견해서 소개를 해드릴가 합니다.

아마 애드센스 광고를 설치하는 분들에게는 도움이 될 것 같네요.

(ㅠ_ㅠ 임시저장이 날라가버려서 다시 작성하는 글이네요.. 아오 ㅠ_ㅠ)

바로!!

애드센스 광고 차단시 알림창 만들기

적용 방법은 간단합니다.

우선 본인의 광고 코드를 .adsense-area 클래스명의 div 태그로 감싸줍니다. 클래스명은 본인이 수정해도 상관없습니다.

<div class="adsense-area">

본인의 애드센스 광고 code

</div>

광고를 본문 상단, 본문 하단, 사이드바 총 3개를 설치 했다면

전부 다 할 필요는 없고 본문 상단 광고에만 작업을 해주는 것이 가장 좋습니다.

접속하자 마자 바로 보이니까요

위 작업이 끝났다면 </body> 위에 스크립트를 추가 해줍니다.


<script type="text/javascript">
$(document).ready(function(){
	setTimeout("checkAds();", 1000);
});
	function checkAds() {
		if ($(".adsense-area").height() == "0") {
				$(".adsense-area").after("<div class='adsense-alt'><p>광고 차단 플러그인(Adblock)을 사용중 이신가요?</p><p>이 블로그는 콘텐츠 작성 및 기타 유지 비용을 광고수입으로 사용하고 있습니다.</p><p>더 유익하고 좋은 콘텐츠로 보답하겠습니다.</p><p>Adblock 설정을 해주시면 감사합니다.</p></div>");
		}
};
</script>
</body>

끝입니다 쉽죠?

checkAds()를 페이지로드 1000ms(1초) 후에 실행하고

.adsens-area 클래스의 높이가 0 일 때(광고 사라져 div박스 크기가 0이 되면)

해당 클래스 뒤에 새로운 .adsense-alt 클래스의 내용을 추가 해라 라는 의미입니다.

<div class='adsense-alt'><p>광고 차단 플러그인(Adblock)을 사용중 이신가요?</p><p>이 블로그는 콘텐츠 작성 및 기타 유지 비용을 광고수입으로 사용하고 있습니다.</p><p>더 유익하고 좋은 콘텐츠로 보답하겠습니다.</p><p>Adblock 설정을 해주시면 감사합니다.</p></div>

이 부분은 본인이 직접 수정을 하시거나, .adsense-alt 의 CSS 속성을 주어서 본인이 직접 꾸미시면 됩니다.