본문글 우측 상단에 애드센스 광고 넣기

본문 글 상단에 광고 넣는 방법은 가로로 긴 형태나 상단에 사각형 2개 혹은 내용 옆에 붙는 광고 등 다양합니다.

개인적으로는 원고 우측에 사각형 광고를 선호합니다.

왜냐하면 내용을 읽는 동안 광고가 꾸준히 노출되기 때문에 광고효과가 크기 때문입니다. 어느 블로거는 상단에 2개의 광고에 비해 클릭률이 더 높다고 합니다.

예전에는 애드센스 플러그인에서 코드를 넣으면 되었지만 최근 티스토리에서 기존에 사용하던 애드센스 플러그인을 사용할 수 없게 만들어서 html 편집을 이용해야 합니다.

아래의 코드를 "

본문 글 상단에 광고 넣는 방법은 가로로 긴 형태나 상단에 사각형 2개 혹은 내용 옆에 붙는 광고 등 다양합니다.

개인적으로는 원고 우측에 사각형 광고를 선호합니다.

아래의 코드를 ""행 상단에 적용해 주어야 합니다.

<!-- 본문 우측 상단 광고 시작 -->
<div style="float: right; margin: 5px 0px 0px 10px;">
<style>
.adsense-post-right { width: 200px; height: 200px;}
@media (min-width:576px) { .adsense-post-right { width: 250px; height: 250px; } }
@media (min-width:768px) { .adsense-post-right { width: 300px; height: 250px; } }
@media (min-width:992px) { .adsense-post-right { width: 336px; height: 280px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adsense-post-right"
  style="display:inline-block"
  data-ad-client="게시자ID"
  data-ad-slot="광고단위ID"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 본문 우측 상단 광고 끝 -->

위 코드를 적용하면 아래와 같이 광고가 출력됩니다.

하지만 본문 글 기본 폰트에서는 보기가 좋지만 제목 글이나 이미지가 상단에 있으면 레이아웃이 망가져버립니다.

아래도 같은 코드가 적용된 우측 상단 광고인데 광고 왼쪽으로 여백이 생겨버립니다.

이렇게 보일 바에 상단에 가로로 긴 형태이든 광고 2개를 보여주던지 하는 게 더 보기에 좋습니다.

상단 이미지처럼 보이는 이유는 첫 단락에 제목 글이 적용되어서 생기는 문제입니다.

플러그인에서 코드를 넣어주면 괜찮았던 것 같은데...

다음 티스토리 업데이트가 이루어지면 이 부분이 개선되길 기다리며 이곳에 포스팅으로 남겨둡니다.

나중에 개선되면 우측 상단광고로 바꿀 예정입니다.

그 사이에 다른 능력자가 나타나 이 부분을 해결해 줄 수 있는 좋은 코드를 제공해준다면 바꿔야지요.

"행 상단에 적용해 주어야 합니다.

<!-- 본문 우측 상단 광고 시작 -->
<div style="float: right; margin: 5px 0px 0px 10px;">
<style>
.adsense-post-right { width: 200px; height: 200px;}
@media (min-width:576px) { .adsense-post-right { width: 250px; height: 250px; } }
@media (min-width:768px) { .adsense-post-right { width: 300px; height: 250px; } }
@media (min-width:992px) { .adsense-post-right { width: 336px; height: 280px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adsense-post-right"
  style="display:inline-block"
  data-ad-client="게시자ID"
  data-ad-slot="광고단위ID"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 본문 우측 상단 광고 끝 -->

위 코드를 적용하면 아래와 같이 광고가 출력됩니다.

하지만 본문 글 기본 폰트에서는 보기가 좋지만 제목 글이나 이미지가 상단에 있으면 레이아웃이 망가져버립니다.