티스토리 본문 또는 홈페이지 본문에 자동 광고 삽입하기

안녕하세요 오늘은 티스토리나 홈페이지에 귀찮게 광고를 삽입하지 않아도 자동으로 광고를 띄울수 있는 방법을 포스팅 하겠습니다

어렵지 않으니 차근차근 따라오시면 됩니다^^

저처럼 티스토리 블로그를 하면서 광고 수입을 하고 있는 분이라면 광고 위치가 중요하다는것을 알것입니다

특히나 광고위치 중에 본문에 포함된 광고가 제일 많은 클릭이 발생하고 노출이 자연스럽기때문에 수입면에서 아주 좋은 위치임에는 틀림이 없습니다

차근히 따라해보시고 안되는 분들은 댓글 달아주시면 제가 아는 선에서 깔끔하게 알려드리겠습니다

저또한 웹 HTML 극초보자이지만 하나하나 배워가면서 적용해나가고 있습니다

자 그럼 시작해볼게요

"티스토리 본문에 광고 자동 삽입"

총 본문에 3개의 광고가 들어갑니다
수정을통해 넣고자하는 갯수를 추가할수도 있고 줄일수도 있습니다
광고가 들어가는 위치는 이미지 아래에 광고가 자동으로 들어갑니다

저는 반응형으로 애드센스 광고를 넣었습니다 반응형 이기때문에 PC화면일때와 모바일일때 자동으로 크기가 조절이 되는 장점이 있습니다
두개는 반응형 한개는 링크반응형을 사용했습니다

먼저 광고화면부터 볼게요
PC일때

모바일화면일때

이렇게 광고가 나갑니다
반응형이기에 사이즈 조절을 할수 있습니다 사이즈 조절은 CSS에서 하시면 됩니다

이제 적용방법을 알아봅시다

<!-- {AD 본문자동-------------------------------------------------------------------------------->

<div id="adsenselink1" style="display:none;">

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

<!-- 본문 중간 반응형 -->

<ins class="adsbygoogle adsenselink1"

     style="display:block"

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

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

</div>

<div id="adsenselink2" style="display:none;">

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

<!-- 본문 중간 반응형 -->

<ins class="adsbygoogle adsenselink2"

     style="display:block"

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

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

</div>

<div id="adsenselink3" style="display:none;">

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

<!-- 링크 반응형 본문중간 -->

<ins class="adsbygoogle adsenselink3 "

     style="display:block"

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

     data-ad-slot="5453118777"

     data-ad-format="link"></ins>

</div>

<script type="text/javascript">

$(function(){

  var numimg = parseInt($(".imageblock").length,10);

  var ibwidth = 200;

  if(numimg>0){

    if(numimg==1){

      $("#adsenselink2").remove();

      $("#adsenselink3").remove();

    }else if(numimg==2){

      $("#adsenselink3").remove();

    }

    if(numimg>0){

      ibwidth = $(".imageblock:eq(2)").css("width");

      if(parseInt(ibwidth) < 857){

        $("#adsenselink1").css({"display":"block"});

      }else{

        $("#adsenselink1").css({"display":"block"});

      }

      $(".imageblock:eq(1)").append($("#adsenselink1"));

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

    }

    if(numimg>1){

      ibwidth = $(".imageblock:eq(4)").css("width");

      if(parseInt(ibwidth) < 728){

        $("#adsenselink2").css({"display":"block"});

      }else{

        $("#adsenselink2").css({"display":"block"});

      }

      $(".imageblock:eq(3)").append($("#adsenselink2"));

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

    }

    if(numimg>2){

      ibwidth = $(".imageblock:last").css("width");

      if(parseInt(ibwidth) < 728){

        $("#adsenselink3").css({"display":"block"});

      }else{

        $("#adsenselink3").css({"display":"block"});

      }

      $(".imageblock:last").append($("#adsenselink3"));

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

    }

  }else{

    $("#adsenselink1").remove();

    $("#adsenselink2").remove();

    $("#adsenselink3").remove();

  }

});

</script>

<!-- AD 본문자동} -------------------------------------------------------------------------------->

위 코드를 HTML </body> 위에 복사해서 넣어주세요

코스설명

붉은 글씨로 되어 있는것은 자신의 애드센스 광고를 넣어주시면 됩니다

자신의 애드센스 코드 </ins>까지 복사하셔서 넣으세요

그리고 파란색으로 된 글씨에보면 첫번째 숫자2 두번째 숫자4 세번째 last 라고 되어있죠

그 의미는 

first 첫번째 이미지 아래

2 두번째 이미지 아래

3 세번째 이미지 아래

4 네번째 이미지 아래

last 마지막 이미지 아래 이렇게 적용이 됩니다 잘 모르시겠다면 숫자 바꿔가면서 해보시면 금방 아실거에요

이것을 응용하면 애드센스 뿐만 아니라 다양한 배너 광고를 하실 수 있습니다

그리고 애드센스 반응형을 사용했으니 크기를 css에서 맞춰줍니다

css 작업없이 적용 가능하지만 더 이쁘게 광고가 보여주기 위해선 css 에서 손을 봐줘야겠죠

저는 pc에서는 width를 auto로 하고 height를 280px를 적용했습니다

모마일에서는 width를 auto로하고 height를 150에 적용해놓았습니다

반응형이기에 매일 같은 광고로 출력이 되는것은 아니고 때에 따라 크기가 달라질때도 있습니다

잘 설명이 되었나 모르겠네요..^^

반응형 애드센스 크기 조절은 다음시간에 포스팅 하도록 하겠습니다