[티스토리] 애드센스 광고차단시 알림글 나오게 만들기

 

 

CCZ-CROSS 스킨 수정하면서 코코소프트님 블로그를 자주 방문하고 있는데요.

 

http://cocosoft.kr/403글을 보고 제 블로그에도 적용하게 되었답니다.

 

CSS에서 속성주는 방법은 설명되어있지 않아

 

어설프지만 속성까지 정리겸 올려봅니다

 

 

1. 먼저 메세지 글이 나오게 할 애드센스 광고에

 

<div class="adsense-area"> 와 </div> 사이에 애드센스 코드를 넣어주면 된답니다.

 

 

예)

 

<!-- 본문 상단 반응형 애드센스 시작 -->
<div style="float:right; margin: 20px 0px 15px 0px; padding-left:10px; background:white;">
<div class="adsense-area">

 

                     

                애드센스 광고 소스

 

</div>
</div>

<!-- 본문 상단 반응형 애드센스 종료 -->

 

 

아무래도 블로그에 접속해서 제일 처음 보이는 곳이 상단의 광고이다보니

 

본문상단에 애드센스가 위치한다면 그 광고에만 알림글이 나오게 설정하면 됩니다.

 

 

 

◈ 참고사항

 

 

 

CCZ-CROSS 스킨 수정하면서 코코소프트님 블로그를 자주 방문하고 있는데요.

 

http://cocosoft.kr/403글을 보고 제 블로그에도 적용하게 되었답니다.

 

CSS에서 속성주는 방법은 설명되어있지 않아

 

어설프지만 속성까지 정리겸 올려봅니다

 

 

1. 먼저 메세지 글이 나오게 할 애드센스 광고에

 

<div class="adsense-area"> 와 </div> 사이에 애드센스 코드를 넣어주면 된답니다.

 

 

예)

 

<!-- 본문 상단 반응형 애드센스 시작 -->
<div style="float:right; margin: 20px 0px 15px 0px; padding-left:10px; background:white;">
<div class="adsense-area">

 

                     

                애드센스 광고 소스

 

</div>
</div>

<!-- 본문 상단 반응형 애드센스 종료 -->

 

 

아무래도 블로그에 접속해서 제일 처음 보이는 곳이 상단의 광고이다보니

 

본문상단에 애드센스가 위치한다면 그 광고에만 알림글이 나오게 설정하면 됩니다.

 

 

 

◈ 참고사항

 

를 기준으로 애드센스 광고의 위치는 다음과 같습니다.

 

        <본문 상단 애드센스>

 

<div class="e-content post-content fouc"></div>

 

        <본문 하단 애드센스>

 

 

2. html편집에서 </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>이 블로그는 콘텐츠 작성 및 기타 유지 비용을 광고수입으로 사용하고 있습니다.</p><p>광고차단을 해제해주세요. </p><p>Please disable ad-block to view this website.</p></div>");
}
};
</script>
<!-- 광고차단시 알림창 끝 -->

</body>

 

 

3.CSS 편집에서 아래의 소스를 붙여넣어주면 된답니다.

 

/* 광고차단시 알림창 */
.adsense-alt {
text-align: center;
width: 100%;
padding: 10px;
font-size: 14px;
font-weight: bold;
border-width: 2px;
border-style : solid;
border-color : #F6E3EC;
background-color: #F6E3EC;
}

 

 

이제 소스 수정을 다 했으니 확인을 해보아야겠지요?

 

크롬의 adblock 프로그램등을 실행시키고 블로그를 방문하면

 

아래와 같은 화면이 나타난답니다.

 

 

샐리는 여기까지만 작업을 하였네요.

 

허접하지만 조금이나마 도움이 되길 바래봅니다~!!

를 기준으로 애드센스 광고의 위치는 다음과 같습니다.

 

        <본문 상단 애드센스>

 

<div class="e-content post-content fouc">

 

 

CCZ-CROSS 스킨 수정하면서 코코소프트님 블로그를 자주 방문하고 있는데요.

 

http://cocosoft.kr/403글을 보고 제 블로그에도 적용하게 되었답니다.

 

CSS에서 속성주는 방법은 설명되어있지 않아

 

어설프지만 속성까지 정리겸 올려봅니다

 

 

1. 먼저 메세지 글이 나오게 할 애드센스 광고에

 

<div class="adsense-area"> 와 </div> 사이에 애드센스 코드를 넣어주면 된답니다.

 

 

예)

 

<!-- 본문 상단 반응형 애드센스 시작 -->
<div style="float:right; margin: 20px 0px 15px 0px; padding-left:10px; background:white;">
<div class="adsense-area">

 

                     

                애드센스 광고 소스

 

</div>
</div>

<!-- 본문 상단 반응형 애드센스 종료 -->

 

 

아무래도 블로그에 접속해서 제일 처음 보이는 곳이 상단의 광고이다보니

 

본문상단에 애드센스가 위치한다면 그 광고에만 알림글이 나오게 설정하면 됩니다.

 

 

 

◈ 참고사항

 

를 기준으로 애드센스 광고의 위치는 다음과 같습니다.

 

        <본문 상단 애드센스>

 

<div class="e-content post-content fouc"></div>

 

        <본문 하단 애드센스>

 

 

2. html편집에서 </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>이 블로그는 콘텐츠 작성 및 기타 유지 비용을 광고수입으로 사용하고 있습니다.</p><p>광고차단을 해제해주세요. </p><p>Please disable ad-block to view this website.</p></div>");
}
};
</script>
<!-- 광고차단시 알림창 끝 -->

</body>

 

 

3.CSS 편집에서 아래의 소스를 붙여넣어주면 된답니다.

 

/* 광고차단시 알림창 */
.adsense-alt {
text-align: center;
width: 100%;
padding: 10px;
font-size: 14px;
font-weight: bold;
border-width: 2px;
border-style : solid;
border-color : #F6E3EC;
background-color: #F6E3EC;
}

 

 

이제 소스 수정을 다 했으니 확인을 해보아야겠지요?

 

크롬의 adblock 프로그램등을 실행시키고 블로그를 방문하면

 

아래와 같은 화면이 나타난답니다.

 

 

샐리는 여기까지만 작업을 하였네요.

 

허접하지만 조금이나마 도움이 되길 바래봅니다~!!

</div>

 

        <본문 하단 애드센스>

 

 

2. html편집에서 </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>이 블로그는 콘텐츠 작성 및 기타 유지 비용을 광고수입으로 사용하고 있습니다.</p><p>광고차단을 해제해주세요. </p><p>Please disable ad-block to view this website.</p></div>");
}
};
</script>
<!-- 광고차단시 알림창 끝 -->

</body>

 

 

3.CSS 편집에서 아래의 소스를 붙여넣어주면 된답니다.

 

/* 광고차단시 알림창 */
.adsense-alt {
text-align: center;
width: 100%;
padding: 10px;
font-size: 14px;
font-weight: bold;
border-width: 2px;
border-style : solid;
border-color : #F6E3EC;
background-color: #F6E3EC;
}

 

 

이제 소스 수정을 다 했으니 확인을 해보아야겠지요?

 

크롬의 adblock 프로그램등을 실행시키고 블로그를 방문하면

 

아래와 같은 화면이 나타난답니다.

 

 

샐리는 여기까지만 작업을 하였네요.

 

허접하지만 조금이나마 도움이 되길 바래봅니다~!!