JB FACTORY

본문 상단에 애드센스 광고 2개를 가로로 나란히 배치하는 방법을 소개합니다. 반응형 웹디자인에 사용 가능한 코드입니다.

광고 단위

사용할 광고 단위는 디스플레이 광고입니다. 애드센스에서 제공하는 광고 코드를 그대로 사용합니다. 2개의 서로 다른 광고 단위를 사용해도 되고, 1개의 광고 단위를 두 번 사용해도 됩니다.

광고를 넣는 위치

[스킨 편집 - HTML]에서 <s_article_rep>와 </s_article_rep> 사이에 있는 다음 코드를 찾으세요.

[##_article_rep_desc_##]

본문을 출력하는 치환자로, 그 위에 광고 코드를 넣으면 본문 상단에 광고가 나옵니다.

참고 : 티스토리 강좌 | 스킨 수정하는 방법

코드

다음 코드를 넣으세요. 광고 코드는 자신의 것으로 수정합니다.

<style>
  .jb-adsense-table-cell-right ins { display: none !important; }
  @media ( min-width: 1024px ) {
    .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 !important; width: 300px; height: 250px; }
    .jb-adsense-table-cell-left { padding-left: 0px; text-align: left; }
    .jb-adsense-table-cell-right { padding-right: 0px; text-align: right; }
  }
  @media ( min-width: 1200px ) {
    .jb-adsense-table-cell ins { width: 336px; height: 280px; }
		.jb-adsense-table-cell-left { padding-left: 10px; }
    .jb-adsense-table-cell-right { padding-right: 10px; }
  }
</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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- _ JB SKIN DEMO TD -->
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-11662159935xxxxx"
           data-ad-slot="27272xxxxx"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="jb-adsense-table-cell jb-adsense-table-cell-right">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- _ JB SKIN DEMO TD -->
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-11662159935xxxxx"
           data-ad-slot="27272xxxxx"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>
</div>

• 모바일에서는 가로로 꽉찬 광고가 나옵니다.
• 1024px 이상에서는 300x250 광고가 두 개 나옵니다.
• 1200px 이상에서는 336x280 광고가 두 개 나옵니다.
• padding-left, padding-right의 값을 수정하여 광고 사이의 간격을 조정할 수 있습니다.
• 모바일에서 가로로 꽉찬 광고가 나오는 게 싫다면, data-full-width-responsive="true"에서 true를 false로 변경하세요.

모바일에서 광고를 본문 상단 오른쪽에 배치하기

모바일에서 본문 상단 오른쪽에 광고 하나, PC에서는 본문 상단 두 개를 배치하고 싶다면 다음 코드를 사용하세요. 

<style>
    .jb-adsense-table-cell-left { float: right; width: 200px; height: 200px; margin: 5px 0px 20px 10px; }
    .jb-adsense-table-cell-right ins { display: none !important; }
    @media ( min-width: 1024px ) {
        .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 !important; width: 300px; height: 250px; }
        .jb-adsense-table-cell-left { float: none; width: auto; margin: 0px; padding-left: 0px; text-align: left; }
        .jb-adsense-table-cell-right { padding-right: 0px; text-align: right; }
    }
    @media ( min-width: 1200px ) {
        .jb-adsense-table-cell ins { width: 336px; height: 280px; }
        .jb-adsense-table-cell-left { padding-left: 10px; }
        .jb-adsense-table-cell-right { padding-right: 10px; }
    }
</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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- _ JB SKIN DEMO D -->
            <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-11662159935xxxxx"
                     data-ad-slot="27272xxxxx"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
            <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
        <div class="jb-adsense-table-cell jb-adsense-table-cell-right">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- _ JB SKIN DEMO D -->
            <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-11662159935xxxxx"
                     data-ad-slot="27272xxxxx"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
            <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
</div>

참고

• 웹브라우저 가로폭을 줄였을 때 광고 크기가 바로 반영되지 않습니다. 새로 고침해야 웹브라우저 가로폭에 맞는 광고가 나옵니다.
• 본문 상단 광고 2개 배치가 애드센스 정책 위반인지 아닌지 논란이 있습니다. 이 포스트는 방법만 알려드리는 것일 뿐, 자신의 책임 하에 사용하셔야 합니다.