티스토리 블로그 본문 상단에 애드센스 광고 달아보기 (FastBoot)

블로그/FastBoot
2018. 9. 11. 00:30

안녕하세요. 네코망고입니다. 오늘은 티스토리 블로그 본문 최상단에 애드센스 기재하는 방법에 대해 알아보겠습니다. 물론 반응형 애드센스를 달면 괜찮지만 모바일에서 반응형 애드센스의 경우 정사각형의 크기로 적용되기 때문에 블로그 첫화면에 광고가 본문 글보다 많이 보이는 문제가 발생됩니다. 따라서 모바일로 볼때는 직사각형 모양의 작은 광고가 나오도록 설정해주어야 하는데 그 방법에 대해 오늘 알아보려고 합니다. 글로 설명하기가 어려워 아래 본문 포스트로 가보시면 어떤 얘기인지 쉽게 아실 수 있습니다. 그럼 티스토리 fastboot 본문 상단에 애드센스 달아보기 지금부터 알아보겠습니다.

네코망고의 소소한 일상 꿀팁,

따라하기만 해도 득이되는 블로그~!

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1. 결과먼저 보고가기

제가 적용한 애드센스입니다. 웹의 경우 아래와 같이 큰 사이즈로 적용되고 모바일의 경우 본문 글 그리고 카테고리란의 글리스트 위에 다음과 같이 애드센스 광고가 뜨게됩니다. 반응형 광고로 적용하게 되면 모바일에서 큰 정사각형 모양이 나오기 때문에 글보다 광고가 더 크게 화면을 차지하게 되는 문제가 있습니다. 만약 제가 방문자라면 블로그 글보다는 광고가 먼저 보이게 되면서 방문하기도 싫어질 것 같은 생각도 드네요. 따라서 웹과 모바일 접속 시에 css를 이용해서 fastboot에 알맞은 광고 크기를 지정해주면 됩니다.

▲ 웹화면

▲ 본문 글 상단

▲ 글 리스트 상단

2. 코드 수정하고 광고 넣기

우선 구글애드센스에서 반응형 애드센스를 발급받고 코드를 아래 사진처럼 수정합니다. <style> ~ </style> 부분이 모바일과 웹접속 시 광고 사이즈를 변경하는 부분입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                <!--구글 애드센스 화면 최상단-->
<center>
<style>
.top { width:100%; height: 70px; }
@media(min-width: 768px) { .top { width: 833px; height: 215px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 본문 상단 광고 -auto -->
<ins class="adsbygoogle top"
     style="display:block"
     data-ad-client="ca-pub-"
     data-ad-slot=""
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
                <!--구글 애드센스 화면 최상단-->
Colored by Color Scripter
cs