티스토리 상단에 애드센스 광고 2개 넣는 방법 - 웹, 모바일을 한방에 해결

예전까지만 해도 티스토리 상단에 고정크기 1개 넣는게 유행(?)이었습니다. 하지만 그렇게하면, 모바일에서 잘 안보이는 경우가 더러 있기도 할 뿐만 아니라 상단 2개가 수익률이 더 높은지 유명 블로거들은 거진 다 상단 광고 2개를 선호하더라구요. 그래서 저도 상단 2개로 사용 중에 있습니다.

티스토리 상단에 광고 2개 넣는 방법

저도 초보이기 때문에 이것저것 알아보다가 제일 괜찮은 걸로 추천드립니다. HTML은 참 잠재력이 무궁무진한 것 같아요. 특히 HTML 수정하실 땐 항상 전에 쓰던 HTML을 백업하는 거 꼭!! 잊지 마세요.

1. 애드센스 광고단위 만들기

<경로 : 구글애드센스 - 광고단위 - 새광고단위 생성 - 텍스트 및 디스플레이광고 - 생성>

광고단위

새 광고단위 클릭

텍스트 및 디스플레이 광고로 선택!

이름은 자유롭게 위처럼 "상단용 자동크기" 정도로 해주시고 나머지는 건드릴게 없습니다.

위 코드 부분을 딱 복사~~!!

2.광고 코드를 HTML에 삽입하기

<style>

  .jb-adsense-table { display: table; width: 100%; margin: 20px 0px; }

  .jb-adsense-table-row { display: table-row; }

  .jb-adsense-table-cell { display: table-cell; }

  .jb-adsense-table-cell ins { display: inline-block; width: 336px; height: 280px; }

  .jb-adsense-table-cell-left { text-align: left; }

  .jb-adsense-table-cell-right { text-align: right; }

  @media ( max-width: 1023px ) {

    .jb-adsense-table-cell ins { display: inline-block; width: 300px; height: 250px; }

  }

  @media ( max-width: 767px ) {

    .jb-adsense-table { display: block; }

    .jb-adsense-table-row { display: block; }

    .jb-adsense-table-cell { display: block; text-align: center; }

    .jb-adsense-table-cell-left ins { display: inline-block; width: 300px; height: 100px; }

    .jb-adsense-table-cell-right ins { display: none !important; }

  }

</style>

<div class="jb-adsense-table">

  <div class="jb-adsense-table-row">

    <div class="jb-adsense-table-cell jb-adsense-table-cell-left">

      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 상단용 자동크기 -->

<ins class="adsbygoogle"

     data-ad-client="ca-pub-AAAAAAAAAAAAAA"

     data-ad-slot="BBBBBBBBBB"</ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

    </div>

    <div class="jb-adsense-table-cell jb-adsense-table-cell-right">

      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 상단용 자동크기 -->

<ins class="adsbygoogle"

     data-ad-client="ca-pub-AAAAAAAAAAAAAA"

     data-ad-slot="BBBBBBBBBB"</ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

    </div>

  </div>

</div>

이부분을 전체 복사하시기 전에, 빨간박스와 파란박스 부분을 방금 광고 코드에서 붙여넣습니다. 하나의 광고 코드로 가능하니까 참고하세요.

이 코드를 전체 복사합니다. 그리고 블로그에 꾸미기-스킨 편집을 들어가시면,

html편집 부분이 있습니다. 바로 눌러줍니다.

article_rep_desc

이 부분을 스킨편집에 ctrl+f 하셔서 위치를 찾습니다. 

이 article_rep_desc 를 기준으로 위쪽에 쓰면 상단 광고가, 아래쪽에 쓰면 중단, 하단 광고로 쓸 수가 있습니다. 그리고 복사하신 코드의 맨위 부분과 맨 아래 부분은 위 사진과 같이 <!--  상단광고 2개 시작  -->  이렇게 주석처리 해주시는게 나중에 알아보기가 정말 편해져요. 지금은 상단 2개의 광고 코드를 삽입할 예정이므로, 위쪽에 복사 붙여넣기를 해주면 됩니다. 광고 삽입은 여기서 끝!

3. 현재 코드의 장점

이 코드의 장점이라고 할 것 같으면, 바로 pc에서는 2개의 상단광고로 보이게 되지만, 모바일에서는 크기가 자동 조절된 광고로 바뀐다는 점입니다. 만약 모바일에서 화면을 다 차지해버리는 큰 광고가 2개 연달아 뜬다면, 구글 애드센스의 정책 위배가 될 수도 있다는 점~! 간단하게 이 하나의 코드로 상단 애드센스 광고를 졸업하시는 것을 추천드립니다.

pc(웹) 블로그 글 화면입니다. 깔끔하죠?ㅎㅎ

모바일 화면입니다. 깔끔하게 반영이 된 모습을 볼 수 있어요.ㅎㅎ

여기까지 티스토리 상단에 애드센스 광고 2개 넣는 법이었습니다. 초보이지만, 궁금한 점이 있으시다면 댓글로 남겨주세요. 친철하게 답변드리겠습니다.