미니쿠파
미니쿠파
미니쿠파
전체 방문자
1,852,264
오늘
701
어제
1,366
  • 분류 전체보기 (131)
    • 휴대폰 (17)
      • 안드로이드 (9)
      • ios (5)
    • 소프트웨어 (35)
      • 앱 (4)
      • 프로그램 (12)
      • 사이트 (5)
      • 윈도우 (7)
      • 티스토리 (7)
    • 하드웨어 (37)
      • cpu (6)
      • 그래픽카드 (2)
      • 메인보드 (6)
      • 모니터 (4)
      • 스피커 (1)
      • 라즈베리파이 (6)
    • 개발 (19)
      • flutter (4)
      • node.js (3)
      • JS, 티스토리 (4)
      • 파이썬 (2)
      • 안드로이드 (6)
    • 게임 (17)
      • 마인크래프트 (10)
      • GTAV (6)
    • 뉴스 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 책임한계와 법적고지

인기 글

  • 2022년 2월 AMD, 인텔 CPU 성능⋯
    2021.02.05
    2022년 2월 AMD, 인텔 CPU 성능⋯
  • 마인크래프트 텍스쳐팩, 리소스⋯
    2020.05.05
    마인크래프트 텍스쳐팩, 리소스⋯
  • 2022년 2월 라데온, 엔비디아⋯
    2020.12.28
    2022년 2월 라데온, 엔비디아⋯
  • 윈도우10 정품인증 하는법, 안⋯
    2020.08.14
    윈도우10 정품인증 하는법, 안⋯
  • 티스토리 블로그, 웹사이트에 s⋯
    2020.09.28
    티스토리 블로그, 웹사이트에 s⋯

태그

  • 프로그램
  • CPU
  • 성능
  • 마인크래프트
  • 윈도우10
  • 안드로이드 스튜디오
  • 바이오스
  • 적용법
  • 윈도우
  • 스펙
  • 라즈베리파이
  • 리뷰
  • 비교
  • 컴퓨터
  • 설치
  • GTA5
  • 모드
  • 모니터
  • 티스토리
  • 가격

최근 댓글

  • 감사합니다. 저도 이 글보고 설⋯
    마이
  • 3월꺼는 없나요
    123
  • 가성비 수치가 따로 정리되어서⋯
    행자
  • 설치 usb를 만드는 부분을 보면⋯
    미니쿠파
  • 중요한 경고 문구 같은 건 글⋯
    tq

최근 글

  • GTA5 라디오로 듣고 싶은 노래⋯
    2022.02.14
    GTA5 라디오로 듣고 싶은 노래⋯
  • 메인보드 바이오스 업데이트 하⋯
    2021.02.26
    메인보드 바이오스 업데이트 하⋯
  • 윈도우10 안전모드로 부팅하는⋯
    2021.02.15
    윈도우10 안전모드로 부팅하는⋯
  • GTA5 온라인 팁! 빠르게 먼 거⋯
    2021.02.12
    GTA5 온라인 팁! 빠르게 먼 거⋯
  • 2022년 2월 휴대폰, AP 성능 순⋯
    2021.02.08
    2022년 2월 휴대폰, AP 성능 순⋯

티스토리

hELLO · Designed By 정상우.
미니쿠파

미니쿠파

티스토리 애드센스 상단 광고 2개 다는 방법
개발/JS, 티스토리

티스토리 애드센스 상단 광고 2개 다는 방법

2020. 5. 11. 10:00
반응형

애드센스 상단 광고 2개
애드센스 상단 광고 2개

티스토리 애드센스 상단 광고 2개 다는 방법

수익을 더 얻기 위해서나 여러 이유로 모바일에선 상단 광고를 한 개 두고 화면의 폭이 넓은 컴퓨터에선 상단 광고를 두 개 두시는 분들도 있습니다. 이번 글에선 다른 분이 올린 애드센스 상단 광고 2개 소스를 최적화하고 이걸 티스토리에 적용하는 법을 알려드리도록 하겠습니다.

목차

    애드센스 광고 코드 복사

    애드센스 사이트 접속애드센스 사이트 접속
    애드센스 사이트 접속

    애드센스 사이트

    우선 상단 광고 2개 설정을 하기에 앞서 상단 광고로 달 광고 코드를 복사해야 합니다. 위 링크를 통해 애드센스 사이트에 접속한 다음 광고 탭을 클릭한 후 광고 단위 기준 버튼을 클릭해주세요.

    애드센스 광고 코드 복사
    애드센스 광고 코드 복사

    광고 단위 기준 버튼을 클릭한 다음 반응형 광고를 하나 만드시거나 기존에 만들어놨던 반응형 광고를 클릭해주세요. 그런 다음 HTML 탭에서 검은 띠로 감쳐준 부분을 복사해주시면 됩니다.

    상단 광고 2개 설정하기

    티스토리 플러그인 설정티스토리 플러그인 설정
    티스토리 플러그인 설정

    상단 광고 소스는 구글 애드센스 (반응형) 플러그인을 통해 적용시켜 줄 수 있습니다. 블로그 관리 페이지에서 플러그인 탭을 클린한 후 구글 애드센스 (반응형)을 클릭해주세요.

    티스토리 플러그인 설정
    티스토리 플러그인 설정

    그러면 나오는 창에서 광고 형태에서 상단 광고를 사용하는 광고 형태를 클릭한 후 '글 상단에 넣을 반응형 광고 코드를 붙여넣으세요.' 라고 적혀있는 입력 칸에 아랫 코드를 입력하면 됩니다. 

    상단 광고 2개 소스 코드

    <div class="topAdsense" style="text-align: center;">
        <style type="text/css">
            .adsense_1 {
                display: inline-block;
                width: 100%;
                height: 280px;
            }
    
            .adsense_empty {
                display: none;
                width: 20px;
            }
    
            .adsense_2 {
                display: none;
            }
    
            @media (min-width:680px) {
                .topAdsense .adsbygoogle {
                    display: inline-block;
                    width: 300px;
                    height: 250px;
                }
            }
    
            @media (min-width:783px) {
                .topAdsense .adsbygoogle {
                    display: inline-block;
                    width: 336px;
                    height: 280px;
                }
    
                .adsense_empty {
                    display: inline-block;
                }
            }
        </style>
        <span>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <ins class="adsbygoogle adsense_1" data-ad-client="ca-pub-★" data-ad-slot="●" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </span>
        <span class="adsense_empty">
        </span>
        <span>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <ins class="adsbygoogle adsense_2" data-ad-client="ca-pub-★" data-ad-slot="●" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </span>
    </div>

    ★부분에는 위에서 ca-pub-뒤에 것을 복사한 것을 붙여넣기 하면 되고, ● 부분에는 data-ad-slot 부분을 복사한 것을 붙여 넣기 하면 됩니다.

    간단하게 설명하자면 화면의 폭이 679px 이하면 전체 폭을 차지하는 상단 광고 한 개를  나오게 하고 680px ~ 782px 이면 상단에 300px * 250px 광고를 두 개 나오게 합니다. 마지막으로 화면의 폭이 783px 이상이면 336px * 280px 광고를 두 개 나오게 하며 그 사이에 20px 여백을 삽입합니다.

    모바일 환경(화면의 폭이 좁음) 에서는 전체 폭을 차지하는 광고가 더 수익이 좋다고 하여서 위와 같이 설정을 했습니다.

    상단 광고 2개 적용 확인

    상단 광고 2개 적용된 모습상단 광고 2개 적용된 모습
    상단 광고 2개 적용된 모습

    정상적으로 소스 코드를 적용했다면 화면의 폭이 783px 이상이면 336px * 280px 광고가 두 개 나오며 그 사이에 20px 여백이 삽입되고 680px ~ 782px면 300px * 250px 광고가 두 개 나오며 그 사이에 여백은 삽입되지 않는 것을 확인할 수 있습니다.

    모바일에선 전체 폭 차지하는 광고
    모바일에선 전체 폭 차지하는 광고

    그리고 이런 모바일 환경에선 화면의 전체 폭을 차지하는 광고가 한 개만 나오는 것을 확인할 수 있습니다.

    여담

    display: none 시 광고 요청 안함
    display: none 시 광고 요청 안함

    추가로 위 소스에서와 같이 display를 none로 두면 광고 요청이 발생하지 않고 광고가 게재되지 않는다고 합니다. 이런 식으로 광고를 처리하면 요청수나 노출수에 포함되지 않는 것 같습니다.

    참고

    "[블로그] PC와 모바일 광고의 숫자와 배치, 크기를 다르게 하는 방법 (with 애드센스)," 코딩팩토리, n.d. 수정, 2020년 5월 10일 접속, https://coding-factory.tistory.com/510.

     

    관련 글

    티스토리 블로그 평점 댓글 리뷰등 위젯 모음, 달기 - widgetpack

     

    티스토리 블로그 평점 댓글 리뷰등 위젯 모음, 달기 - widgetpack

    티스토리 블로그 평점 댓글 리뷰 등 위젯 모음, 달기 - widgetpack 예전부터 블로그의 스마트폰이나, 앱, 사이트, 프로그램 등 리뷰글에 간단한 평점 위젯 같은걸 달아서 미리 간단하게 평점을 볼 수 있게 만들어..

    MK

    티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

     

    티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

    변환하기 alt 태그 추가 alt태그란 우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다. 네이버 웹마스터 가이드�

    MK

    [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동

     

    [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동

    [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동 티스토리나 타 사이트에서 글을 올렸는데 모종의 이유로 그 글을 삭제하고, 새로 글을 올렸거나, 티스토리에 개인 도메인을 추가해줬

    MK

     

    반응형
      '개발/JS, 티스토리' 카테고리의 다른 글
      • 티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기
      • 티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴
      • [JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동
      미니쿠파
      미니쿠파
      IT 블로거, 앱 개발자 미니쿠파입니다. 블로그에는 주로 컴퓨터, 프로그래밍, 프로그램, 티스토리 관련 글을 올리고 있습니다.
      댓글쓰기
      1. 땅꾸새
        2020.05.11 10:19 신고
        좋은 정보 감사합니다
        수정/삭제댓글쓰기댓글보기
      2. 포우_
        2020.05.12 10:23 신고
        오 좋은정보 잘 보고 갑니다. ㅋㅋ
        댓글 적는거 없는가 싶어서 한참 찾았네요 ㅎㅎ
        블로그 스킨 깔끔하니 예쁘네요!ㅂ
        수정/삭제댓글쓰기댓글보기
      3. nobleyoon
        2020.05.19 09:58 신고
        좋은 정보 감사드립니다.
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.05.19 09:59 신고
          넵 감사합니다
          수정/삭제
      4. 김케케
        2020.05.28 21:23 신고
        감사합니다 이거랑 비슷한 다른 글 20개정도 읽었는데 적용되는게 하나도 없었거든요 ㅜㅜ 이건 적용 잘 되네요 감사합니다
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.05.28 21:26 신고
          잘 되신다니 다행이네요
          수정/삭제
      5. 세.모.글
        2020.07.06 01:19 신고
        좋은 정보 덕분에 저도 적용했어요! 감사합니다 :)
        수정/삭제댓글쓰기댓글보기
      6. 우§ ※ ☆ ★부
        2020.07.23 11:39 신고
        너무 잘되네요. 감사합니다!!
        수정/삭제댓글쓰기댓글보기
      7. 알쏭달쏭
        2020.08.12 01:37
        감사합니다 덕분에 상단 2개 달아났네요 다른곳에서 보고 여지껏 헤매고 있었는데 너무 쉽게 설명해 주셔서 쉽게 달수가 있었네요
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.08.26 19:18 신고
          감사합니다
          수정/삭제
      8. 세.모.글
        2020.08.31 00:52
        안녕하세요 잘 설명해주셔서 적용하고 있습니다. 감사합니다 :) 그런데 혹시 제 블로그에 PC로 볼 때는 2개가 잘 나오는데, 모바일로 볼 때 1개가 나오긴하지만 왼쪽으로 치우쳐져서 나옵니다. 어떻게 해결하면 좋을까요?
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.08.31 07:56 신고
          원래는 화면 폭에 맞게 광고가 나와서 좌측으로 치우치거나 우측으로 치우치는게 없을텐데 잘모르겠네요.. 블로그 스킨이나 주소를 알려주시면 도움을 드릴 수 있을 것 같습니다.
          수정/삭제
      9. 익명
        2020.09.22 23:10
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
      10. 설원장
        2020.09.24 14:39
        하단에도 두개 넣고 싶은데, 위의 방법대로 수정한 코드를 하단광고 코드 넣는 칸에 넣으면 될까요?
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.09.25 20:53 신고
          네 그러시면 될 것 같습니다.
          수정/삭제
      11. 익명
        2020.09.25 00:23
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.09.25 20:55 신고
          현재 위 글에 적혀있는 소스코드가 적용되지 않은 것으로 보입니다.
          수정/삭제
      12. 케이느바
        2020.10.09 02:04
        html 기본적인거 말고는 못만지겠던데 개꿀 정보 덕분에 잘 되네요 고맙습니다^^
        수정/삭제댓글쓰기댓글보기
      13. 익명
        2020.10.12 13:52
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.10.12 13:57 신고
          지금은 바빠서 한 4시간 이후에 집에 가서 살펴보도록 하겠습니다. 개인적으로 이탈률 80% 이상은 평균이라 생각하네요
          수정/삭제
      14. 익명
        2020.10.12 13:55
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
      15. 익명
        2020.10.12 16:47
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
      16. 익명
        2020.10.12 18:22
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
        1. 미니쿠파
          2020.10.12 19:29 신고
          물어보신게 좀 많아서 https://open.kakao.com/me/minikupa 여기서 도움을 드리도록 하겠습니다.
          수정/삭제
      17. 익명
        2020.10.25 00:18
        비밀댓글입니다
        수정/삭제댓글쓰기댓글보기
      18. 찬찬
        2020.10.29 13:48
        티스토리가 애드센스 플러그인 제공을 하지 않으면서 적용이 불가능해진 것 같습니다ㅜ 애드센스 플러그인이 없어서 스킨 편집에서 html편집으로 넣어봤는데 적용이 안되네요ㅠ 방법이 없을까요..
        수정/삭제댓글쓰기댓글보기
      다음 글
      티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기
      이전 글
      티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴
      • 이전
      • 1
      • 2
      • 3
      • 4
      • 다음

      티스토리툴바