[블로그 디자인 1.0.8] 글 상단에 광고 띄우기

# 주저리주저리/블로그 업데이트 / / 2021. 6. 29. 22:39

이번에는 글 본문 상단 광고를 조정해보려고 합니다!

기존 티스토리의 본문 상단 광고는 크게 한 줄로 만들어집니다.

 

 

이번엔 이 광고를 애드센스 내에서 수작업으로 두 개로 쪼개서 나오도록 만드려고 합니다!

 

0. 광고 만들기

이번에도 구글 애드센스에 접속합니다.

 

왼쪽 탭에서 광고 > 개요 에 들어갑니다.

 

 

광고 위치를 조정할 때는 상단 탭의 사이트 기준에서 했었죠?

이번에는 광고 단위 기준 > 디스플레이 광고로 들어갑니다.

 

제목을 설정하시고, 광고 크기는 반응형으로 설정하시고 만들기 버튼을 눌러줍니다.

 

 

그럼 HTML 코드가 뜨는데요,

client값은 현재 여러분의 구글 애드센스 아이디에 할당된 것이고,

slot값은 이 광고에 할당된 값입니다.

나머지 코드는 모두 동일하기 때문에, slot값만 우선 복사해둡니다.

 

 

똑같은 방식으로 광고를 하나 더 만들어줍니다.

우리는 광고를 2개 출력할 거잖아요!!

 

1. 스킨 편집하기

이제 지금까지 만든 광고들을 스킨 편집에서 수동으로 넣어봅시다!

 

환경설정 > 꾸미기 > 스킨 편집을 눌러줍니다.

매번 했던 과정이라 이제는 익숙하죠!!

 

 

우측의 HTML 편집을 눌러줍니다.

 

CSS를 먼저 수정해 주도록 할게요.

아래 CSS 코드는 아미넴님이 만드신 코드를 참고하여 제 블로그 설정에 맞도록 수정했습니다!

다시 한번 아미넴님께 감사인사 드립니다 :)

 

티스토리 상단에 애드센스 광고 2개 띄우기

글 상단에 광고가 2개 뜨는 블로그가 있는데 어떻게 하는지 궁금하신 분이 있을 것 같아서 포스팅 합니다. 관리 페이지에 수익 메뉴가 생기기 전까지는 플러그인이 제공되어 원하는 대로 태그

sangminem.tistory.com

 

아래 내용을 CSS탭의 맨 아래에 추가합니다.

(위치는 크게 상관 없습니다!! 편하신 곳에 넣어주세요!!)

 

/* 글 상단 광고 CSS */
.top-ads {
    text-align: center;
    margin-bottom: 10px;
}
.adsbygoogle.top-left {
    display: inline-block;
    width: 290px;
    height: 290px;
}
.adsbygoogle.top-right {
    display: inline-block;
    margin-left: 12px;
    width: 290px;
    height: 290px;
}
@media (max-width: 600px) {
    .adsbygoogle.top-right {
        display: block;
        height: 290px;
    }
}

 

이제 HTML탭으로 돌아옵니다.

HTML탭에서

이번에는 글 본문 상단 광고를 조정해보려고 합니다!

기존 티스토리의 본문 상단 광고는 크게 한 줄로 만들어집니다.

 

 

이번엔 이 광고를 애드센스 내에서 수작업으로 두 개로 쪼개서 나오도록 만드려고 합니다!

 

0. 광고 만들기

이번에도 구글 애드센스에 접속합니다.

 

왼쪽 탭에서 광고 > 개요 에 들어갑니다.

 

 

광고 위치를 조정할 때는 상단 탭의 사이트 기준에서 했었죠?

이번에는 광고 단위 기준 > 디스플레이 광고로 들어갑니다.

 

제목을 설정하시고, 광고 크기는 반응형으로 설정하시고 만들기 버튼을 눌러줍니다.

 

 

그럼 HTML 코드가 뜨는데요,

client값은 현재 여러분의 구글 애드센스 아이디에 할당된 것이고,

slot값은 이 광고에 할당된 값입니다.

나머지 코드는 모두 동일하기 때문에, slot값만 우선 복사해둡니다.

 

 

똑같은 방식으로 광고를 하나 더 만들어줍니다.

우리는 광고를 2개 출력할 거잖아요!!

 

1. 스킨 편집하기

이제 지금까지 만든 광고들을 스킨 편집에서 수동으로 넣어봅시다!

 

환경설정 > 꾸미기 > 스킨 편집을 눌러줍니다.

매번 했던 과정이라 이제는 익숙하죠!!

 

 

우측의 HTML 편집을 눌러줍니다.

 

CSS를 먼저 수정해 주도록 할게요.

아래 CSS 코드는 아미넴님이 만드신 코드를 참고하여 제 블로그 설정에 맞도록 수정했습니다!

다시 한번 아미넴님께 감사인사 드립니다 :)

 

티스토리 상단에 애드센스 광고 2개 띄우기

글 상단에 광고가 2개 뜨는 블로그가 있는데 어떻게 하는지 궁금하신 분이 있을 것 같아서 포스팅 합니다. 관리 페이지에 수익 메뉴가 생기기 전까지는 플러그인이 제공되어 원하는 대로 태그

sangminem.tistory.com

 

아래 내용을 CSS탭의 맨 아래에 추가합니다.

(위치는 크게 상관 없습니다!! 편하신 곳에 넣어주세요!!)

 

/* 글 상단 광고 CSS */
.top-ads {
    text-align: center;
    margin-bottom: 10px;
}
.adsbygoogle.top-left {
    display: inline-block;
    width: 290px;
    height: 290px;
}
.adsbygoogle.top-right {
    display: inline-block;
    margin-left: 12px;
    width: 290px;
    height: 290px;
}
@media (max-width: 600px) {
    .adsbygoogle.top-right {
        display: block;
        height: 290px;
    }
}

 

이제 HTML탭으로 돌아옵니다.

HTML탭에서 치환자를 찾습니다.

이 치환자가 바로 본문의 내용이 들어가는 치환자인데,

우리는 본문 위에 광고를 넣고 싶기 떄문에 치환자 위쪽에 광고를 넣어줍니다.

그럼 본문 시작 직전에 광고가 들어가겠죠?!

 

 

아래 코드에서 0000000000000000 자리에 본인의 data-ad-client 정보를 넣으시고,

1111111111 자리에 광고의 data-ad-slot 정보를 넣으시면 됩니다!

 

<!-- 상단 사각형 반응형 광고 -->
<div class="top-ads">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <div id="ad-top-left" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-left" data-ad-client="ca-pub-0000000000000000" data-ad-slot="1111111111"
            data-ad-format="rectangle" data-full-width-responsive="true">
        </ins>
        <script>
            if (window.innerWidth < 600) { < !--600 이하는 모바일 환경으로 간주하여 왼쪽광고 제거-- >
                document.getElementById('ad-top-left').remove();
            } else {
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        </script>
    </div>
    <div id="ad-top-right" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-right" data-ad-client="ca-pub-0000000000000000" data-ad-slot="1111111111"
            data-ad-format="rectangle" data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
</div>
<!-- 광고 끝 -->

 

2. 창 크기에 따른 광고 수 설정

추가로 창을 줄였을 때 광고가 세로로 2개 출력되는 문제가 발생해서,

이 문제를 없애려고 창 크기가 줄어들면 광고를 1개만 출력하도록 만들었습니다.

max-width를 930으로 설정해서 사이드메뉴의 유무에 따라 광고 수를 설정했습니다!

(제 블로그 사이즈에 맞췄기 때문에, 원하시는 대로 max-width 숫자를 변경시키면 됩니다!)

 

 

/* 글 상단 광고 CSS */
.top-ads {
    text-align: center;
    margin-bottom: 10px;
}
.adsbygoogle.top-left {
    display: inline-block;
    width: 290px;
    height: 290px;
}
.adsbygoogle.top-right {
    display: inline-block;
    margin-left: 12px;
    width: 290px;
    height: 290px;
}
@media (max-width: 930px) {
    .adsbygoogle.top-left {
        display: none;
    }
    .adsbygoogle.top-right {
        display: block;
        width: 290px;
        height: 290px;
    }
@media (max-width: 600px) {
    .adsbygoogle.top-right {
        display: block;
        height: 350px;
    }
}

3. 결과

아래와 같이 광고가 잘 나옵니다!

크기를 고정해놨기 때문에 만약 더 큰 크기로 키우고 싶으시면 CSS에서 조절해 주시면 됩니다!

크기에 따라 출력되는 광고에도 차이가 있으니, 필요에 맞게 조절하시면 될 것 같아요!

 

일반적인 웹 브라우저 환경

 

모바일 웹 브라우저 환경

 

이것저것 건드리다보니 바꿀게 참 많이 보입니다.

눈에 보이는 부분을 내가 원하는대로 바꾼다는 것은 굉장히 신기하면서 재밌는 일이네요 ㅎㅎ

다음에는 또 어떤 요소를 바꿀 수 있을지 정말 기대됩니다 :)

 

그렇다면 다음 업데이트때 뵙겠습니다! 감사합니다 😄😄

 

반응형
 치환자를 찾습니다.

이 치환자가 바로 본문의 내용이 들어가는 치환자인데,

우리는 본문 위에 광고를 넣고 싶기 떄문에 치환자 위쪽에 광고를 넣어줍니다.

그럼 본문 시작 직전에 광고가 들어가겠죠?!

 

 

아래 코드에서 0000000000000000 자리에 본인의 data-ad-client 정보를 넣으시고,

1111111111 자리에 광고의 data-ad-slot 정보를 넣으시면 됩니다!

 

<!-- 상단 사각형 반응형 광고 -->
<div class="top-ads">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <div id="ad-top-left" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-left" data-ad-client="ca-pub-0000000000000000" data-ad-slot="1111111111"
            data-ad-format="rectangle" data-full-width-responsive="true">
        </ins>
        <script>
            if (window.innerWidth < 600) { < !--600 이하는 모바일 환경으로 간주하여 왼쪽광고 제거-- >
                document.getElementById('ad-top-left').remove();
            } else {
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        </script>
    </div>
    <div id="ad-top-right" class="revenue_unit_item adsense">
        <ins class="adsbygoogle top-right" data-ad-client="ca-pub-0000000000000000" data-ad-slot="1111111111"
            data-ad-format="rectangle" data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
</div>
<!-- 광고 끝 -->

 

2. 창 크기에 따른 광고 수 설정

추가로 창을 줄였을 때 광고가 세로로 2개 출력되는 문제가 발생해서,

이 문제를 없애려고 창 크기가 줄어들면 광고를 1개만 출력하도록 만들었습니다.

max-width를 930으로 설정해서 사이드메뉴의 유무에 따라 광고 수를 설정했습니다!

(제 블로그 사이즈에 맞췄기 때문에, 원하시는 대로 max-width 숫자를 변경시키면 됩니다!)

 

 

/* 글 상단 광고 CSS */
.top-ads {
    text-align: center;
    margin-bottom: 10px;
}
.adsbygoogle.top-left {
    display: inline-block;
    width: 290px;
    height: 290px;
}
.adsbygoogle.top-right {
    display: inline-block;
    margin-left: 12px;
    width: 290px;
    height: 290px;
}
@media (max-width: 930px) {
    .adsbygoogle.top-left {
        display: none;
    }
    .adsbygoogle.top-right {
        display: block;
        width: 290px;
        height: 290px;
    }
@media (max-width: 600px) {
    .adsbygoogle.top-right {
        display: block;
        height: 350px;
    }
}

3. 결과

아래와 같이 광고가 잘 나옵니다!

크기를 고정해놨기 때문에 만약 더 큰 크기로 키우고 싶으시면 CSS에서 조절해 주시면 됩니다!

크기에 따라 출력되는 광고에도 차이가 있으니, 필요에 맞게 조절하시면 될 것 같아요!

 

일반적인 웹 브라우저 환경

 

모바일 웹 브라우저 환경

 

이것저것 건드리다보니 바꿀게 참 많이 보입니다.

눈에 보이는 부분을 내가 원하는대로 바꾼다는 것은 굉장히 신기하면서 재밌는 일이네요 ㅎㅎ

다음에는 또 어떤 요소를 바꿀 수 있을지 정말 기대됩니다 :)

 

그렇다면 다음 업데이트때 뵙겠습니다! 감사합니다 😄😄

 

반응형
저작자표시
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
# 주저리주저리/블로그 업데이트 관련 글
글 더보기

티스토리툴바