친절한효자손 취미생활

이 애드온은 티스토리 본문의 상단 오른쪽에만 위치하는 1개짜리 애드센스 광고를 삽입하기 위해 만들었습니다. 본문의 우측 상단에만 자리를 잡습니다. 모바일 해상도에서는 200px X 200px 사이즈로 출력이 됩니다. 가로 해상도 768px 이상에서는 300px X 250px 사이즈로 출력이 되며, 가로 1000px 해상도 이상 부터는 336px X 280px 사이즈로 출력 됩니다. 사이즈는 변해도 위치는 늘 본문 우측에만 자리를 잡습니다.


애드센스 코드 세팅

코딩을 간소화 했습니다. 불필요한 스크립트를 최대한 빼고 애드센스 순정 코드만 그대로 사용함으로서 편의성을 높였습니다. 먼저 아래의 첨부파일을 다운로드 받습니다.


친효애드온 - 본문 상단 오른쪽 1개 반응형 애드센스.txt


다운을 받으시고 열어보시면 아래와 같은 코드가 들어 있습니다.


<div class="rgyTopRightAD">

    <style type="text/css">

        .rgyTopRightAD {

            float: right;

            width: 200px;

            height: 200px;

            margin: 0 5px 10px 5px;

        }

        

        @media (min-width: 768px) {

            .rgyTopRightAD {

                width: 300px;

                height: 250px;

            }

        }

        

        @media (min-width: 1000px) {

            .rgyTopRightAD {

                width: 336px;

                height: 280px;

            }

        }

    </style>

    

    <!--여기에 애드센스 코드를 넣으세요-->

    

</div>


여기에서 빨간색으로 주석 처리가 되어 있는 부분을 지우시고 오리지널 애드센스 광고 코드를 그대로 붙여넣기를 해주시면 됩니다. 그리고 첨부파일의 전체 코드를 복사합니다.


세팅된 코드 삽입하기

세팅된 코드는 티스토리 플러그인에 있는 구글 애드센스 (반응형) 플러그인에서 사용하시면 됩니다. 먼저 플러그인을 찾습니다.


그리고 상단 광고가 활성화되는 위의 두 가지 형식 중 원하시는 것으로 선택하시고 아래의 글 상단에 넣을 반응형 광고 코드를 붙여넣으세요 칸에 그대로 붙여넣기를 하시고 저장하시면 됩니다.


정상적인 노출 예시

코드가 정상적으로 동작하는 경우는 아래와 같습니다. 모바일 (스마트폰) 해상도와 태블릿, 그리고 PC에서 보여지는 예시를 친효스킨의 경우에서 스크린샷 해봤습니다. 참고해 주시기 바랍니다.


먼저 모바일 해상도에서의 모습 입니다. 200 X 200 사이즈로 본문 우측 상단에 정상 노출 되고 있습니다.


가로 768px 이상부터 1000px 미만까지의 해상도에서 출력되는 모습 입니다. 애드센스 사이즈는 300 X 250 입니다.


마지막으로 가로 1000px 이상의 해상도에서 출력되는 모습 입니다. 사이즈는 336 X 280 사이즈 입니다.


티스토리 플러그인에서 테스트를 진행하였고 원하는 해상도에서 정상적으로 노출이 되고 있으니 타스킨에서도 정상적으로 동작할 것 입니다. 한번 사용해 보시기 바랍니다. 기타 문의사항은 댓글로 남겨주세요. 그리고 과도한 광고는 오히려 독입니다. 콘텐츠 퀄리티를 최대한 살리시면 광고 수익은 알아서 올라갈 것 입니다. 끝.




공유하기

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글 작성 시 삭제됩니다.

  1. 글 감사합니다. 붙여넣기하는 애드센스 스크립트 광고단위는 무엇으로 하면 되나요?
    2020.02.04 22:26 신고
  2. 다른코드 엄청 집어넣어도 안되더니 이걸로 한방에 해결됐습니다. 존경합니다
    2020.02.21 23:50 신고
  3. 안녕하세요 글 잘 읽었습니다.
    말씀하신 본문 오른쪽 상단 광고 넣는 방법을 해봤는데, 웹에서는 문제없이 진행됩니다.
    모바일로 봤을때는 광고는 뜨는데, 글 자체가 한쪽으로 치우쳐지는 현상이 나타납니다.
    혹시 이 문제에 대해 해결할 수 있을까요?
    2020.04.01 16:20 신고
    • 안녕하세요, 이 코딩을 사용하면 원래 그렇게 됩니다. 상단 1개만 넣으시려면 그냥 순정 애드센스 코드를 사용하면 됩니다.
      2020.04.01 18:02 신고
  4. 친절한효자손님 저도 밑에분처럼 웹에서는 문제가 없는데 모바일에서는 한쪽으로 치우치는데 순정 애드센스 코드라는게 뭔가요? 요 코드가 뭐고 어떻게 사용하면 되는건가요?
    2020.08.11 21:26 신고
    • 안녕하세요, 수정되지 않은 애드센스 코드를 말해요. 지금 이 방법은 당연히 한쪽으로 글이 치우칠 수 밖에 없습니다. 오른쪽 상단으로 나오게 하는 거니까요.
      2020.08.11 21:46 신고
  5. 티스토리를 한지 한달조금넘어서 수정되지 않은 애드센스 코드가 뭔지를 잘 모르겠네요 ㅠㅠ
    2020.08.11 21:48 신고
  6. 저도 모바일에서는 한쪽으로 치우치게되는데,
    모바일에서 본문 젤위의 우측상단에만 광고가 뜨고, 광고크기가 지나면 글이 전체적으로 나오게는 못하나요???
    친효님이 모바일적용사진보면 한쪽으로 치우치지않는것같은데..
    2020.10.17 01:08 신고
    • 무슨말씀인지 이해를 못하겠어요. 지금 우측 상단에 광고 적용하시려는거 아니신가요? 그럼 당연히 광고가 우측으로 치우치게 됩니다.
      2020.10.17 02:05 신고
  7. 광고는 우측인데 글은 광고가끝나도계속 좌측에몰려있어요...사진을보여주고싶은데
    2020.10.17 02:16 신고
    • 그럼 코드가 어딘가 잘 못 된 것입니다.
      2020.10.17 02:19 신고
    • 흠.. 올려주신텍스트그대로했는데 ㅠㅠ친효님모바일에서 제글잘보이나여??
      2020.10.17 02:20 신고
    • 잘 적용되어 있습니다. 그리고 저번에 광고 본문 중간중간에 너무 많다고 말씀드린 것 같은데....
      2020.10.17 02:21 신고
    • 친효님 제가확인해보니
      모바일 티스토리어플로 들어가면 한쪽치우침현사이 있고 모바일에서 검색해서 들어가면 잘적용이 되어있네요.
      티스토리어플로도 잘보이게하는방법은 모르시죵?
      2020.10.17 10:13 신고
    • 네. 몰라요
      2020.10.17 13:32 신고