저번 포스팅에서는 사이드바에 구글 애드센스 광고를 수동으로 추가하는 방법을 다루었습니다. 이번에는 같은 방식으로 게시글 본문 상단과 하단에 광고를 배치하는 방법을 정리하겠습니다.
최대 2개씩 상단과 하단에 총 4개까지 광고를 추가할 수 있으며, 모바일에서는 각각 하나씩 총 2개로 최적화하여 적용할 수 있습니다.
참고로 본문에서는 hELLO 스킨(버전 4.10.4)을 기준으로 설명합니다. 스킨 적용이 필요한 경우, 아래의 관련 글을 먼저 참고하신 후 진행하시면 됩니다.
티스토리 hELLO 스킨 적용하기 (2025년 7월 기준 작성)
티스토리 hELLO 스킨 적용하기 (2025년 7월 기준 작성)
✨ 리뉴얼 안내예전에 운영하던 블로그에서도 2024년 10월에 소개한 적이 있었는데요,이번에는 새롭게 리뉴얼하는 차원에서 다시 정리하여 작성해봅니다. 🗓️ 2025년 7월 기준적용 스킨: hELLO 스
intelwarehouse.tistory.com
🔧 광고 생성하기
구글 애드센스에서 디스플레이 광고를 2개 생성합니다. 이 광고들은 각각 좌측과 우측에 배치할 광고로, 상단과 하단 모두 동일하게 사용됩니다.
- 구글 애드센스의 [광고] 메뉴 → 광고 단위 기준 탭으로 이동합니다.
- 디스플레이 광고를 선택합니다.
- 광고 크기는 기본값인 반응형을 유지합니다.
- 원하는 이름을 지정한 뒤 광고를 생성합니다. (예 : 왼쪽 광고 / 오른쪽 광고)
- 동일한 방식으로 하나를 더 생성합니다.
⬆️ 게시글 본문 상단 광고 2개 추가하기
- 블로그 HTML 편집 화면으로 이동합니다.
- `Ctrl + F`로 `article_rep_desc`를 검색합니다. 이는 본문 영역을 의미합니다.
- 상단에 광고를 배치하기 위해 `</header>` 태그 바로 아래쪽에 아래에 작성한 광고 코드를 삽입합니다. 제목과 목차 사이에 광고가 삽입됩니다.
<!-- 본문 상단 목차 윗부분에 광고 2개 출력 -->
<div style="text-align: center; margin: 10px;">
<style>
.adsbygoogle.post-top-first {display:block}
.adsbygoogle.post-top-second {display:none}
@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:300px;max-width:300px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:300px;max-width:300px;width:100%;height:280px;}
}
</style>
<ins class="adsbygoogle post-top-first"
data-ad-client="ca-pub-00000000000000"
data-ad-slot="00000000000"
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-00000000000000"
data-ad-slot="00000000000"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
코드의 내용을 간단하게 설명하면,
- `adsbygoogle.post-top-first`와 `adsbygoogle.post-top-second` 클래스명은 각각 좌측과 우측 광고를 의미합니다.
- `@media (min-width:768px)`는 작은 화면(모바일)에서는 광고를 하나만 출력하도록 설정합니다.
- `data-ad-client`와 `data-ad-slot` 부분은 본인이 생성한 광고 단위의 속성을 복사하여 교체해야 합니다.
코드 내부에 보면 `data-ad-client`와 `data-ad-slot`이라고 적힌 부분은 제가 임시로 작성해놓았는데 여기에 본인이 생성한 디스플레이 광고 코드를 넣으시면 됩니다.
광고를 생성하고 아래 '기존 광고 단위'에 만든 광고들 우측에 보면 `<>` 아이콘을 클릭하여 광고 코드를 볼 수 있습니다. 여기서 위의 두 속성만 복사해서 넣어주시면 됩니다. 그리고 적용을 누르시면 상단 광고 2개 추가가 완료됩니다.
광고 적용 후 바로 표시되지 않을 수 있으므로, 몇 분 정도 기다린 뒤 확인하는 것이 좋습니다.
⚠️ 단, 같은 IP에서 반복적으로 새로고침할 경우 광고가 로드되지 않을 수 있으므로 주의가 필요합니다. 광고 로드 실패시 아예 안 나오거나 하나만 나올 수 있습니다.
⬇️ 게시글 본문 하단 광고 2개 추가하기
- HTML 편집 화면에서 `tag_label_rep`를 검색합니다. 이는 본문 하단에 태그가 출력되는 영역입니다.
- 해당 영역 바로 아래에 상단과 동일한 광고 코드를 삽입합니다.
- 상단에서 사용한 광고 코드 그대로 활용할 수 있으며, 추가적인 수정은 필요하지 않습니다.
적용 후 확인하면 본문 상단과 하단에 각각 2개씩 광고가 출력됩니다.
이렇게 설정하면 티스토리 게시글 내에 상단·하단 광고 배치가 완료됩니다.
