데스크톱에서


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




    모바일 애드센스 배치모바일에서 (단, 아이폰에서는가로폭이 좁아서 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 뭐하라

    문제가 있나요?(?)

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

    • 2014.06.05 16:54

      비밀댓글입니다


    • 2014.06.05 16:56

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.06.05 17:04 신고

        ; 아뇨 찾는게 아니고 말그대로 붙여넣는겁니다.
        <div class="article">는 광고에 들어가는게 아니고 스킨이에요.
        먼저 스킨을 재설치해서 광고입력하는 부분을 초기화하고 진행해보세요
        1번에서 메모장같은데서 일단 광고코드를 수정하시고,
        2번 틀에 넣으신뒤(메모장 같은데서)
        2번 틀 전체를
        <div class="article">아랫줄에 붙여넣으세요.


    • 2014.06.05 17:39

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.06.05 19:18 신고

        아직 2차승인이 안나서 안뜨는것같고 광고는 3개다 제대로들어갔네요 좀더 기다려보세요^^


    • 2014.06.05 19:34

      비밀댓글입니다


    • 2014.06.05 19:51

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.06.05 21:23 신고

        그건 저도 오래돼서 기억이 안나네요..;
        광고 허용 및 차단에는 본인블로그 쓰는게 아니고 허용할광고, 차단할광고 설정하는거에요.
        사이트승인에 넣어보세요

    • BlogIcon A TearDrop
      2014.06.06 01:03 신고

      상단에 두개가 제일많이사용하는거같아요
      잘보고갑니다
      두개로 바꿀일있음 참고하겟습니다 ^^

      • BlogIcon 뭐하라
        2014.06.06 10:45 신고

        방문 감사합니다^^
        상단2개 효과좋아요~

    • BlogIcon 장혜철
      2014.06.14 09:58 신고

      이 코드로 광고를 넣으니 광고가 중앙정렬이 되지 않네요.
      중앙정렬 방법 좀 가르쳐 주심 감사하겠습니다.

      • BlogIcon 뭐하라
        2014.06.14 14:48 신고

        아 빼먹은 부분이 있었네요.
        본문에수정해놨습니다.
        <div class="adbox"부분입니다

      • BlogIcon 장혜철
        2014.06.14 22:04 신고

        감사합니다. ^^
        제가 고쳐 볼라고 좀 해 보니 잘 안되더라고요...

    • BlogIcon 장혜철
      2014.06.14 22:55 신고

      이 코드를 응용해서 하단 광고를 하나 넣었는데, 중앙정렬이 되지 않습니다.

      <div class="adbox" style="text-align: center; margin: 0 auto;">
      <div class="col-sm-6" style="padding-left:0;">
      [광고코드]
      </div></div>

      넣었습니다. 잘못된 부분 있나요??

      • BlogIcon 뭐하라
        2014.06.14 23:39 신고

        "col-sm-6"는 화면을 2분할할때 쓰는 옵션입니다.
        한개만 쓰실때는 class="col-sm-6"를 지워주시면됩니다.

      • BlogIcon 장혜철
        2014.06.15 01:03 신고

        매번 감사합니다.
        뭐하라님 블로그 보면 메인 화면에도 사이드바가 띄워져 있는데, 제꺼는 그렇지가 않네요...
        이것도 따로 만드신 건가요??

      • BlogIcon 뭐하라
        2014.06.15 08:54 신고

        그것은 readiz님 블로그에 관련강좌가 있으니 참조해보세요~

    • BlogIcon 오렌지수박
      2014.09.16 20:39 신고

      덕분에 많은 도움이 되었습니다. 감사합니다.

    • BlogIcon ­틸다
      2014.11.01 13:21 신고

      안녕하세요. 반응형 스킨을 제대로 이해하지 못해서 애드센스 적용에 어려움을 먹고 있었는데 덕분에 상단에 2개 어렵지 않게 적용시켰습니다. 감사드려요. 모바일 화면에서도 문제없이 나오는 것 같긴 하지만 제가 제대로 했는지 확실치 않아 질문 몇 개만 드릴게요.

      1. 파란색 부분에 my_adslot으로 수정하면서 -l, -r 이 부분은 모두 삭제를 하는 게 맞나요? 그대로 뒀더니 광고가 나오지 않아 삭제했더니 정상 출력이 되더라구요.

      2. 구글에서 코드 따올 때 스마트크기조정이 아닌 '고급(코드수정필요)'로 가져와서 적용시켰는데 그렇게 하면 되는 게 맞는지요?

      3. 제 블로그 하단에는 반응형이 아닌 일반형 광고 하나가 달려있는데요, 이와 비슷한 크기의 반응형 직사각형 광고로 바꾸고 싶은데 코드 찾기가 쉽지 않네요. 도움 부탁드려도 될까요?

      • BlogIcon 뭐하라
        2014.11.01 13:38 신고

        1. 먼저 광고단위 이름에 영문이나 숫자를 포함시켜주세요.
        my_adslot으로 수정하신 부분이 광고단위를 인식하는 부분인데, 이게 다른광고와 중복되면 충돌이납니다.
        광고단위를 영문으로 수정한뒤 코드를 얻으셔야합니다. -l -r도 제가 광고단위 이름에 -l -r이 있기때문에 포함된것입니다. 본인에 맞게 지우는게 맞습니다.
        2.네 고급으로 가져오시면 됩니다.
        3.하단에는 수정할 것 없이 그냥 스마트크기조정 광고를 넣으시면 됩니다.

    • BlogIcon 백곰이
      2014.11.21 22:16 신고

      블로그 정말 잘보았습니다. 다름이 아니라 ㅠ.ㅠ 자꾸 세로로 배열되는데 뭐가 문제일까요ㅠ/ㅠ

      • BlogIcon 뭐하라
        2014.11.21 22:34 신고

        지금 쓰고계신 스킨이 부트스트랩 기반 스킨이 아니네요...

    • BlogIcon 백곰이
      2014.11.21 22:53 신고

      오랜만에 그냥 블로그하는거라 이것저것 손대보는데 여기서 진짜 정보 많이 얻네요.ㅠ.
      리플 어떻게 달아야 하는지 몰라서요. 부트스트랩으로 바꾼거 같은데 혹시 Life님 아이폰에서는 광고가 이상하게 나오는데 이건 원래 그런건가요?

      여기서 광고 하단에 하나더 달 수 있는건가요?

      • BlogIcon 뭐하라
        2014.11.21 22:59 신고

        아이폰은 가로픽셀이 320px밖에 안돼서 광고가 1개만 표시되도록 설정했습니다.
        아이폰에서도 2개가 표시되게 하려면 본문 1번 대신 다음을 적용해보세요. 수정법은 같습니다

        (생략)
        (왼쪽 광고)
        <style>
        .life-is-an-egg-l {width: 300; height: 50; }
        @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: 300px; height: 50px; }
        @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>
        (생략)

    • BlogIcon 백곰이
      2014.11.21 23:04 신고

      감사합니다.ㅠ. 일다 ㄴ해보겠습니다. 정말 감사합니다. 이렇게 댓글까지 달아주셔서...

    • BlogIcon 백곰이
      2014.11.21 23:10 신고

      http://image.kilho.net/?pk=1805053 이렇게 나옵니다.
      여기서 하나만 나오게 할 수 있을까요?

      • BlogIcon 뭐하라
        2014.11.21 23:13 신고

        아 그 문제는 광고 코드 아랫줄에 다음 한줄을 추가해주시면 해결될겁니다.
        <div style="clear:both;"></div>

    • BlogIcon 백곰이
      2014.11.21 23:30 신고

      뭐하라님 <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script> 바로 밑에 넣으면 될까요? 제가 잘못 넣는거 같아서 똑같은 증상이 나와서요ㅠ

      • BlogIcon 뭐하라
        2014.11.21 23:36 신고

        이상하네요.. 본문 2번코드 전체의 아랫줄에 첨가해보시고 안되시면 그냥 상단광고 1개 쓰는거 추천드릴게요..
        예상외로 2개쓰는것보다 1개만 쓰는데 수익이 더 좋더군요

    • BlogIcon 백곰이
      2014.11.21 23:48 신고

      이렇게 답변 해주신것만으로 진짜 감사드려요. 블로그 수익도 그렇긴 한데 아직 그럴것도 아니고 뭐하라님처럼 양질의 블로그도 아니고 그냥 애드센스 이런거 그냥 취미삼아서 하다보니 이렇게 깔끔하게 하는게 너무 보기 좋아서 이렇게 집착이 가네요^^;
      광고 2개 사용하는게 아니라 1개만 사용한다는 의미는 그냥 상단에 광고 하나만 나오게 하면되나요?
      그냥 2개 이대로 놔둬도 아이폰에서 저렇게 광고 나와도 정책위반이나 이런건 아니겠죠?
      그럼 왼쪽이나 오른쪽 둘중에 하나만 남기고 지우면될까요? 마지막으로 질문이에용 ㅠ 진짜 귀찮게 해드려서 죄송합니다.

      • BlogIcon 뭐하라
        2014.11.21 23:50 신고

        이런 복잡한 방법 다 필요없이~
        반응형 광고 코드를 얻으실 때 인텔리전트 크기조정 코드를 얻으셔서
        ##_article_rep_desc_##
        위에하나, 아래하나 삽입하시면 충분할겁니다.

    • BlogIcon 백곰이
      2014.11.21 23:58 신고

      아 감사합니다.^^