반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다
반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데
애드센스 정책 관련 정보에 따르면
모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에
애드센스 배치에 고민을 하시는분들이 많을꺼라 생각되요!!
저도 그랬구요
그런 고민을 하시는분들을 위한 애드센스 배치방법입니다.
아래와 같이 구글 애드센스를 배치하시면
데스크탑의 경우 상단 336 x 280 광고 2개가 위치하고
스마트기기에선 본문 상단 320 x 100 광고와
본문 하단에 300 x 250 광고가 위치하게 됩니다.
skin.html 파일 편집
<div class="article">
반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다 반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데 애드센스 정책 관련 정보에 따르면 모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에 애드센스 배치에 고민을 하시는분들이 많을꺼라 생각되요!! 저도 그랬구요 그런 고민을 하시는분들을 위한 애드센스 배치방법입니다. 아래와 같이 구글 애드센스를 배치하시면 데스크탑의 경우 상단 336 x 280 광고 2개가 위치하고 스마트기기에선 본문 상단 320 x 100 광고와 본문 하단에 300 x 250 광고가 위치하게 됩니다. skin.html 파일 편집 <div class="article"> </div> 우선 본문 위치를 찾아줍니다. 이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다. <div id="adsense_wrap"> <div id="adsense_left"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- adsense --> <ins class="adsbygoogle adslot_1" style="display:block" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div id="adsense_right"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- adsense --> <ins class="adsbygoogle adslot_2" style="display:block" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div style="clear: both;"></div> 진하게 작성된 부분에 해당 구글애드센스 주소를 넣어주세요. class 부분에 adslot_1 과 adslot_2 를 추가해주세요 <div class="article"> </div> 아래쪽에 아래 소스를 한 줄 추가해줍니다. <div id="adsense_moved"></div> 그리고 </body> 를 검색하셔서 윗줄에 <script type="text/javascript"> //reponsive adsense moved if ($('body').width() < "960") { $("#adsense_right").appendTo('#adsense_moved'); $(".another_category").appendTo('#adsense_moved'); } </script> 를 추가해주세요! skin.css 파일 편집 아래부분에 소스를 복사하여 붙혀넣어주세요 /* * adsense */ #adsense_wrap { width: 682px; height: 280px; margin: 20px auto 0; } #adsense_left { float: left; width: 336px; height: 280px; margin-right: 10px; } #adsense_right { float: left; width: 336px; height: 280px; } #adsense_moved { display: none; } #adsense_community { width: 100%; margin-top: 10px; } .adslot_1, .adslot_2 { width: 336px; height: 280px; } @media all and (max-width: 959px) { #adsense_wrap { width: 100%; height: auto; max-height: 100px; } #adsense_left { float: none; width: 320px; height: auto; margin: 0 auto; } #adsense_right { float: none; width: 300px; height: 250px; margin: 0 auto 10px; } #adsense_moved { display: block; height: auto; } .adslot_1 { width: 320px; height: 100px; } .adslot_2 { width: 300px; height: 250px; } }
</div>
우선 본문 위치를 찾아줍니다.
이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다.
<div id="adsense_wrap">
<div id="adsense_left">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsense -->
<ins class="adsbygoogle adslot_1"
style="display:block"
data-ad-client=""
data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="adsense_right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsense -->
<ins class="adsbygoogle adslot_2"
style="display:block"
data-ad-client=""
data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div style="clear: both;"></div>
진하게 작성된 부분에 해당 구글애드센스 주소를 넣어주세요.
class 부분에 adslot_1 과 adslot_2 를 추가해주세요
<div class="article">
반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다 반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데 애드센스 정책 관련 정보에 따르면 모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에 애드센스 배치에 고민을 하시는분들이 많을꺼라 생각되요!! 저도 그랬구요 그런 고민을 하시는분들을 위한 애드센스 배치방법입니다. 아래와 같이 구글 애드센스를 배치하시면 데스크탑의 경우 상단 336 x 280 광고 2개가 위치하고 스마트기기에선 본문 상단 320 x 100 광고와 본문 하단에 300 x 250 광고가 위치하게 됩니다. skin.html 파일 편집 <div class="article"> </div> 우선 본문 위치를 찾아줍니다. 이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다. <div id="adsense_wrap"> <div id="adsense_left"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- adsense --> <ins class="adsbygoogle adslot_1" style="display:block" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div id="adsense_right"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- adsense --> <ins class="adsbygoogle adslot_2" style="display:block" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div style="clear: both;"></div> 진하게 작성된 부분에 해당 구글애드센스 주소를 넣어주세요. class 부분에 adslot_1 과 adslot_2 를 추가해주세요 <div class="article"> </div> 아래쪽에 아래 소스를 한 줄 추가해줍니다. <div id="adsense_moved"></div> 그리고 </body> 를 검색하셔서 윗줄에 <script type="text/javascript"> //reponsive adsense moved if ($('body').width() < "960") { $("#adsense_right").appendTo('#adsense_moved'); $(".another_category").appendTo('#adsense_moved'); } </script> 를 추가해주세요! skin.css 파일 편집 아래부분에 소스를 복사하여 붙혀넣어주세요 /* * adsense */ #adsense_wrap { width: 682px; height: 280px; margin: 20px auto 0; } #adsense_left { float: left; width: 336px; height: 280px; margin-right: 10px; } #adsense_right { float: left; width: 336px; height: 280px; } #adsense_moved { display: none; } #adsense_community { width: 100%; margin-top: 10px; } .adslot_1, .adslot_2 { width: 336px; height: 280px; } @media all and (max-width: 959px) { #adsense_wrap { width: 100%; height: auto; max-height: 100px; } #adsense_left { float: none; width: 320px; height: auto; margin: 0 auto; } #adsense_right { float: none; width: 300px; height: 250px; margin: 0 auto 10px; } #adsense_moved { display: block; height: auto; } .adslot_1 { width: 320px; height: 100px; } .adslot_2 { width: 300px; height: 250px; } }
</div>
아래쪽에 아래 소스를 한 줄 추가해줍니다.
<div id="adsense_moved"></div>
그리고 </body> 를 검색하셔서 윗줄에
<script type="text/javascript">
//reponsive adsense moved
if ($('body').width() < "960") {
$("#adsense_right").appendTo('#adsense_moved');
$(".another_category").appendTo('#adsense_moved');
}
</script>
를 추가해주세요!
skin.css 파일 편집
아래부분에 소스를 복사하여 붙혀넣어주세요
/*
* adsense
*/
#adsense_wrap {
width: 682px;
height: 280px;
margin: 20px auto 0;
}
#adsense_left {
float: left;
width: 336px;
height: 280px;
margin-right: 10px;
}
#adsense_right {
float: left;
width: 336px;
height: 280px;
}
#adsense_moved {
display: none;
}
#adsense_community {
width: 100%;
margin-top: 10px;
}
.adslot_1,
.adslot_2 {
width: 336px;
height: 280px;
}
@media all and (max-width: 959px) {
#adsense_wrap {
width: 100%;
height: auto;
max-height: 100px;
}
#adsense_left {
float: none;
width: 320px;
height: auto;
margin: 0 auto;
}
#adsense_right {
float: none;
width: 300px;
height: 250px;
margin: 0 auto 10px;
}
#adsense_moved {
display: block;
height: auto;
}
.adslot_1 {
width: 320px;
height: 100px;
}
.adslot_2 {
width: 300px;
height: 250px;
}
}
