반응형 1단 스킨에서 사이드 광고 게재 방법(애드센스)
1단형스킨의 경우 사이드바가 없어서 사이드에 애드센스를 넣기가 쉽지 않습니다.
반응형스킨이기에 사이드에 배치한 광고를 모바일에서 처리하기 곤란하기도 합니다.
아래 스크립트는 반응형 광고단위를 이용해 사이드에 남는 공간을 인식하여 사이드에 광고를 삽입하거나, 본문아래에 광고를 삽입합니다.
스크립트
<script>
$("head").append("<style>.container {position:relative;}.sideAd {width: 120px;position: absolute;top: 300px;left: -120px;}</style>");
var sideAd = '<div class="sideAd"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0503973014303***" data-ad-slot="39817950**" data-ad-format="vertical"></ins></div>';
if ($(".container").first().offset().left>120) {
$(".container").first().append(sideAd);
if ($(".container").first().offset().left>300){
$(".sideAd").css({width:"300px",left:"-300px"});
} else if ($(".container").first().offset().left>160){
$(".sideAd").css({width:"160px",left:"-160px"});
}
} else {
$(".tt_article_useless_p_margin>p").last().append('<div class="bottomAd"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0503973014303***" data-ad-slot="39817950**" data-ad-format="auto"></ins></div>');
}
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
.
수정사항
빨간색 표시한 data-ad-client="ca-pub-0503973014303***" data-ad-slot="39817950**"부분은 본인의 반응형 광고단위 코드에서 가져와서 붙여넣으세요.
아래쪽의 auto는 본문 하단에 삽입될 경우 광고의 형태를 지정해줍니다. horizontal : 가로형광고, vertical: 세로형광고, rectangle: 직사각형광고
.contaner의 경우 대부분의 스킨에서 같은 구조를 취하고 있으므로 수정하지 않으셔도 되지만, 혹시 적용이 되지 않으시다면 본인의 스킨에서 class명을 확인하셔야합니다.
방법: 크롬에서 F12를 누른 후 아래 그림처럼 좌우여백이 주황색으로 표시되는 element의 class명을 확인합니다.
1. 아이콘을 클릭한 후
2. 본문과 좌우여백 사이의 공간에 마우스를 가져갔을 때 그림처럼 본문은 파란색, 그 바로 좌우 좁은 공간에 초록색, 좌우 여백에 주황색이 표시됐을 때
3. div뒤에 나오는 class명을 확인하면 됩니다 (여기서는 .container)
*포스팅 할 때 문단 간격 없음에 체크해야 본문 하단에 광고가 들어갑니다
