티스토리 반응형 스킨 애드센스 상단 광고2개 모바일 1개 넣는 방법

티스토리 반응형 스킨 애드센스 상단 광고2개 모바일 1개 넣는 방법,티스토리에서 제공하는 구글애드센스 모바일,반응형,PC 플러그인이 있지만 반응형 스킨으로는 상단 광고2개에 모바일 광고 1개 배치가 자유롭지 못하다 그렇기 때문에 변형된 HTML 코드를 이용하면은 쉽게 해결할수 있다 굳이 이럴필요까지가 있나 하지만 상단에 광고 1개 넣는것보다 2개 넣는것 더 수익이 좋기 때문에 매우 효율적이다

 

 

우선 구글애드센스 홈으로 가서 계정로그인을 하고 광고를 눌러 광고 단위 기준에서 디스플레이 광고 만들기 클릭 한다

반응형으로 만든다

 

 

 

 

반응형 코드가 나오면 모두 복사를 한뒤 메모장에 붙여넣기 해준다

 

<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-코드1"

     data-ad-slot="코드2"</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-코드1"

     data-ad-slot="코드2"</ins>

<script>

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

</script>

    </div>

  </div>

</div>

애드센스코드.txt

0.00MB

그리고 위에 애드센스 코드를 받는다 위에 소스코드처럼 나온다 아까전에 메모장에 저장을 해둔 반응형 코드를 연다

"ca-pub-코드1" 와 "코드2" 이부분에 내가 받은 코드에서 client / slot 코드를 입력한다

 

 

스킨편집 - HTML에서 article_rep_desc 바로 위에 애드센스코드 전체를 붙여넣기 한다

 

 

 

이렇게 광고가 나온다 필자는 320X100 사이즈 두개를 넣었다 보통 300X250 사이즈를 넣는다

 

광고 사이즈 크기 조절 방법

 

모바일은  .jb-adsense-table-cell-left ins { display: inline-block; width: 300px; height: 100px; }에서 width 과 height

숫자를 조절해서 화면에 맞게 맞춘다

 

PC는 .jb-adsense-table-cell ins { display: inline-block; width: 336px; height: 280px; }, .jb-adsense-table-cell ins { display: inline-block; width: 300px; height: 250px; }에서 마찬가지로 width 과 height 숫자를 조절해서 화면에 맞게 맞춘다

 

해당 소스 출처:링크