본문으로 바로가기

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


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

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


바로!!

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

적용 방법은 간단합니다.

우선 본인의 광고 코드를 .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 속성을 주어서 본인이 직접 꾸미시면 됩니다.

완성된 예시


광고 차단전 상태


광고 차단시에 나타나는 알림 문구


저는 기본 스킨에 알림 박스가 있어서 그것을 사용해서 아래처럼 만들어봤습니다.



광고가 사라졌을 시에 아예 포스팅 콘텐츠 본문을 전체를 가려버리고

알림창을 띄우고 페이지 새로고침을 유도하거나


새로운 페이지로 리디렉션을 할 수도 있겠지만... 굳이 광고를 보지 않는다고.. 콘텐츠 전체를 가려버리는 것은;;

아닌 것 같아서 그 방법에 대해서는 +_+ 공개하지 않습니다 ㅎㅎ


암튼 애드센스 사용자 분들은 간단하게 사용해보시면 좋겠네요..


근데 사실 저도.. Adblock 사용하고 있다는 점.. ㅠ_ㅠ


암튼 저코드를 응용하면 특정 화면에서 특정 클래스가 없어졌을 때를 판단해서 

새로운 소스코드를 추가하거나 삭제 할 때도 유용하게 사용 할 수 있을 것 같네요.


저거를 설치하다보니 제광고 여백 설정이 완전 이상하게 되어있네요.. 나중에 고쳐야지..