티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법

티스토리 반응형 스킨이 배포되면서 구글 애드센스 반응형 배너를 어떻게 적용해야 효율적으로 적용할 수 있는지 알아봅시다.

블로그 특성에 맞게 구글 애드센스 반응형 배너를 넣으면 되겠지만, 어떻게 배너를 넣어야 유지 및 관리가 편할 수 있을까요?

제가 설정한 방법을 참고하셔서 본인 스타일에 맞게 배너를 넣어보세요.

우선 제 블로그에 적용한 화면을 보시죠.

상단 배너는 해상도에 따라 아래와 같이 배너가 보입니다. 가로폭 100%에 따른 자동 반응형 배너로 설정했습니다.

  1. 850px 이상 해상도 : 850px * 80px 배너

  2. 470px~849px 해상도 : (440px~819px) * (60px~80px) 배너

  3. 320px~469px 해상도 : (290px~439px) * (45px~80px) 배너

중간 배너는 오른쪽에 치우쳐서 보이며, 모바일 화면에 꽉차게 보일 경우에 클릭 유도로 인한 제제를 받을수 있으므로 해상도에 따라 아래와 같이 크기를 설정했습니다.

  1. 850px 이상 해상도 : 336px * 280px 배너

  2. 470px~849px 해상도 : 250px * 250px 배너

  3. 320px~469px 해상도 : 200px * 200px 배너

하단 배너는 글 내용에 방해를 받지 않으므로 아래와 같이 크게 보이도록 설정했습니다.

  1. 470px 이상 해상도 : 336px * 280px 배너

  2. 320px ~ 469px 해상도 : 300px * 250px 배너

우선 구글 애드센스( https://www.google.com/adsense/ ) 광고 단위는 아래와 같이 반응형 3개를 기본 옵션으로 생성했습니다.

1. 상단 배너 넣는 방법

관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 찾기(CTRL + F)를 누르셔서 [##_article_rep_desc_##] 를 찾으세요.

그리고 그 바로 앞에 아래처럼 애드센스 광고단위 [반응형 글상단] 코드를 넣으세요.

                <div class="area_view">
<div>
<!-- 애드센스 [반응형 글상단] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글상단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 여기까지 본인 코드를 붙여넣으세요. -->
</div>
                  [##_article_rep_desc_##]
                </div>

2. 중간 배너 넣는 방법

관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 맨 끝에 </body> 태그앞에 아래 코드를 넣으세요.

<div id="adsense336x280middle" class="whadsense" style="display:none">
<!-- 애드센스 [반응형 글중간] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글중간 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<!-- 여기까지 본인 코드를 붙여넣으시되,
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
위 코드는 빼고 넣으세요.  -->
</div>
<script type="text/javascript">
$(function(){
  if($("#adsensemiddle").length=="1"){
    $("#adsense336x280middle").css("display","inline-block")
    $("#adsensemiddle").append($("#adsense336x280middle"));
    (adsbygoogle = window.adsbygoogle || []).push({});
  }else{
    $("#adsense336x280middle").remove();
    $("#adsensemiddle").remove();
  }
});
</script>

</body>

</html>

관리 -> 꾸미기 -> HTML/CSS편집 -> CSS 에서 맨 끝에 아래 소스를 넣으세요.

/* adsense */
#adsense336x280middle { float:right; margin:10px 0 10px 10px;}
.whadsense{width:346px; height:300px;}
.whadsensebottom{width:336px; height:280px;}
#adsense336x280bottom { margin:0 auto;}
@media (min-width: 320px) {
	.whadsensebottom{width:300px; height:250px;}
	.whadsense {width: 210px; height: 220px; }
}
@media (min-width: 470px) {
	.whadsensebottom{width:336px; height:280px;}
	.whadsense {width: 260px; height: 270px; }
}
@media (min-width: 850px) {
	.whadsensebottom{width:336px; height:280px;}
	.whadsense {width: 346px; height: 300px; }
}

그런 다음에 블로그 글을 작성할때 넣고 싶은 위치에 <div id="adsensemiddle"></div> 만 넣으면 됩니다.

아래 스크린샷을 참고하세요.

그러면 위 스크린샷처럼 해당 위치에 자동으로 [반응형 글중간]가 들어갑니다. 넣고 싶지 않으면 안넣어도 해당 배너는 출력되지 않으므로 문제없습니다.

이렇게 글 작성할때 넣어두면, 나중에 빼고 싶을때 HTML 소스에서 위 코드만 제거하면 전체 글에서 뺄수도 있고, 아니면 다른 광고 단위를 한꺼번에 넣을 수도 있어서 애드센스 유지 및 관리가 편리합니다.

3. 하단 배너 넣는 방법

관리 -> 플러그인 -> 플러그인 설정으로 들어가셔서 코드 넣는부분에 애드센스 광고단위 [반응형 글하단] 코드를 넣으시면 되는데 아래소스처럼 넣어야 합니다.

<div style="padding:15px 0 15px 0">
<div id="adsense336x280bottom" class="whadsensebottom">
<!-- 애드센스 [반응형 글하단] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글하단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 여기까지 본인 코드를 붙여넣으세요. -->
</div>
</div>

[반응형 글상단]처럼 HTML소스에 안넣고 이렇게 플로그인 설정에서 [반응형 글하단] 배너를 넣은이유는, HTML 소스에서 글하단 배너를 넣으면 애매한 위치(공유하기 아이콘 위)에 들어가기 때문에 플러그인 설정에서 넣었습니다.

이제 모바일 환경에서 테스트해 볼까요? ( 다음 트로이 랩 http://troy.labs.daum.net/ )

[삼성 갤럭시 노트4] - 상단배너

[삼성 갤럭시 노트4] - 중간배너

[삼성 갤럭시 노트4] - 하단배너

[삼성 갤럭시 S5, 노트3] - 상단배너

[삼성 갤럭시 S5, 노트3] - 중간배너

[삼성 갤럭시 S5, 노트3] - 하단배너

[아이폰6 가로화면] - 상단배너

[아이폰6 가로화면] - 중간배너

[아이폰6 가로화면] - 하단배너

LG는 제가 쓰는 G4가 없네요. ㅠㅠ

[엘지 G3] - 상단배너

[엘지 G3] - 중간배너

[엘지 G3] - 하단배너

[PC 1024 * 768 해상도] - 상단배너

[PC 1024 * 768 해상도] - 중간배너

[PC 1024 * 768 해상도] - 하단배너

모바일 페이지에서 위와 같이 보이면 제대로 설정된것입니다.

잘 안되시거나 문의사항이 있으시면 언제든지 댓글 남겨주세요. 성심성의껏 답변드리겠습니다.

감사합니다. ^^

저작자표시비영리변경금지

• 카카오스토리
• 트위터
• 페이스북

'IT > 블로그,티스토리' 카테고리의 다른 글

카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기  (2)	2016.04.23
유튜브 동영상 반응형 웹에 삽입하는 방법  (13)	2016.04.18
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기  (50)	2016.04.03
티스토리 최신글(최근에 올라온 글) 본문에 추가하기  (27)	2016.04.02
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기  (4)	2016.03.24
티스토리 블로그에 탑(Top) 버튼 넣는 방법  (15)	2016.03.23
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법  (50)	2016.03.21
티스토리(Tistory) 블로그 원본 사진 이미지 보기  (11)	2016.03.14
코드 소스 하이라이트 SyntaxHighlighter 를 수정하여 예쁘게 꾸며봅시다.  (0)	2016.03.11
티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정  (21)	2016.03.08
티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기  (29)	2016.03.07