티스토리 블로그 상단 광고 두 개 설정하기

 

 

안녕하세요? 빵순쓰 블로그입니다.

 

오늘은 티스토리 블로그를 운영할 때 가장 중요한 부분인 상단 광고에 대해서 이야기해보고자 합니다.

상단 광고는 블로그를 방문한 사람이 가장 처음 보는 곳입니다. 그렇기 때문에 블로그의 수익을 높이기 위해 상단광고를 두 개 설정해 둔 블로그도 보셨을 겁니다.

 

자, 그러면 티스토리 블로그에 상단 광고를 어떻게 두 개를 설정하냐?

저만 따라오시면 됩니다. 아주 간단하니 걱정말고 따라오세요.

 

[목차]

 

---

 

1. 디스플레이 광고 두 개 만들기

티스토리 블로그 상단에 광고를 두 개 띄우기 위해서는 사각형 디스플레이 광고가 두 개 필요합니다.

 

구글 애드센스 사이트에 로그인하여 광고->광고단위 기준을 클릭합니다.

 

 

아래와 같이 신규 광고 단위 만들기가 뜨면 디스플레이 광고를 클릭하여

 

 

사각형, 광고 단위 이름을 입력하여 디스플레이 광고를 만들어 줍니다. 광고 단위 이름은 편하신 대로 설정하면 됩니다.

 

 

저는 상단 디스플레이 1이라는 이름으로 만들어 주었습니다.

같은 방식으로 사각형 디스플레이 광고를 두 개 만들어 줍니다.

 

---

 

2. 코드 수정하기

1번 과정을 따라하셨다면 사각형 디스플레이 광고가 두 개 만들어져 있을 것입니다.

 

만들어진 광고의 코드는 오른쪽의 네 개의 아이콘 중 두 번째 아이콘을 눌러 확인합니다.

 

만들어진 두 개의 광고의 data-ad-client="ca-pub-(개인번호)"와 data-ad-slot="(광고번호)"를 확인합니다.

참고로 두 개의 광고에서 개인번호는 동일하며 광고번호는 다릅니다.

 

 

이제 아래의 코드를 복사하여, 혹은 파일을 다운로드하여 자신의 개인번호와 광고번호를 넣어 수정합니다.

<!-- 상단 광고 두 개 시작 -->
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.post-top-first {display:block}
.adsbygoogle.post-top-second {display:none}

@media (min-width: 680px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:300px;max-width:300px;width:100%;height:250px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:300px;max-width:300px;width:100%;height:250px;}
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 왼쪽 광고 -->
<ins class="adsbygoogle post-top-first"
     data-ad-client="ca-pub-(개인번호)"
     data-ad-slot="(1번 광고번호)"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 오른쪽 광고 -->
<ins class="adsbygoogle post-top-second"
     data-ad-client="ca-pub-(개인번호)"
     data-ad-slot="(2번 광고번호)"
     data-ad-format="rectangle"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 상단 광고 두 개 끝 -->

 

상단 광고 두 개 코드.txt

0.00MB

 

---

 

3. html를 편집하기

이제 완성된 코드를 티스토리 블로그에 붙여넣어 적용해 줄 차례입니다.

 

블로그 관리 -> 스킨 편집 -> html 편집에서 _article_rep_desc_를 검색하여 그 위에 복사한 코드를 붙여넣기 합니다.

저는 394줄에 붙여넣기 했으나, 이미 이것 저것 손 본 코드가 많아 여러분은 아마 다른 줄에 붙여넣기 하도록 될 겁니다.

몇 번째 줄에 붙여넣기 하느냐는 별로 중요한 것은 아닙니다.

 

---

 

끝으로

지금까지 티스토리 상단에 네모난 광고 두 개를 설정하는 방법을 알아보았습니다.

이렇게 html에 설정해 두면 글을 쓸 때 수동으로 상단 디스플레이 광고를 설정하지 않아도 모든 게시글에 상단 광고 두 개가 붙게 됩니다. 글 쓸 때의 번거로움도 덜고 광고 두 개를 송출하여 수익도 높일 수 있으니 꼭 설정하여 두시기 바랍니다.

 

저도 배워가고 있는 초보자라 많이 알지는 못하지만 혹시 설정하면서 잘 되지 않거나 질문사항이 있다면 성심성의껏 답변해 드리겠습니다.

오늘도 좋은 하루 보내세요.