반응형

    데스크톱에서


    태블릿 애드센스 배치태블릿에서




    모바일 애드센스 배치모바일에서 (단, 아이폰에서는가로폭이 좁아서 280x100광고 1개만 노출됩니다.)


    이 방법은 아래 글에서 이어집니다.

     - 반응형 광고 단위 사용법, 반응형 스킨에서 상단에 광고 2개 넣기


    이번 글에서는 반응형 스킨중에서도 bootstrap 기반의 스킨에서 좀더 쉽게 광고코드를 넣는 방법을 알아보겠습니다.

    (자신이 사용중인 스킨이 Bootstrap기반의 스킨이라면 html에 col-md-12 이런게 있을겁니다.)



    순서대로 따라하기.


    1. 반응형 에드센스 코드는 이미 얻으셨을겁니다. 좌우 각각 1개씩 필요합니다.

    <style>부분을 다음같이 수정해줍니다.

    파란색 부분은 본인의 코드 수정하시고, 빨간색부분을 따라해주세요.

    (생략)

    (왼쪽 광고)

      <style>

      .life-is-an-egg-l {width: 0; height: 0; }

      @media(min-width:355px) {.life-is-an-egg-l {width: 320px; height: 50px; }

      @media(min-width:768px) {.life-is-an-egg-l {width: 336px; height: 280px; }

      </style>

    (생략)

    (오른쪽 광고)

      <style>

      .life-is-an-egg-r {width: 336px; height: 280px; }

      @media(min-width:320px) {.life-is-an-egg-r {width: 280px; height: 100px; }

      @media(min-width:355px) {.life-is-an-egg-r {width: 320px; height: 50px; }

      @media(min-width:768px) {.life-is-an-egg-r {width: 336px; height: 280px; }

      </style>

    (생략)


    2.다음 틀에 수정한 코드를 넣고 <div class="article"> 아랫줄에 붙여넣습니다.

    <div class="adbox" style="text-align: center; margin: 0 auto;">

            <div class="col-sm-6" style="padding-left:0;">

      (여기에 왼쪽 광고를 넣으세요)

            </div>

            <div class="col-sm-6" style="padding-left:0;">

     (여기에 오른쪽 광고를 넣으세요)

            </div>

    </div>


    끝!


    .


    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함