구글 블로그(Google Blogger) 애드센스 달기

사실 이 블로그는 만든지는 꽤 되었는데 글을 자주 쓰지는 않았습니다. 하지만 최근 티스토리 블로그를 운영하면서 백업의 개념으로 구글 블로그(Google Blogger)도 운영해보아야겠다라는 생각에 글을 작성해봅니다.

일단 저는 네이버, 다음, 티스토리 블로그 서비스를 모두 이용해보았지만 웹언어는 초짜입니다. 스킨(테마)는 인터넷에 공개된 것을 가져다가 조금씩 수정해서 사용하는 정도입니다.

그런데 구글 블로그(Google Blogger)에 애드센스를 달려니 기존 티스토리 블로그에 달던 방식과 조금 다른 면이 있어서 기록으로 남겨둡니다. 또한 몇 가지 차이점이 있으며 인터넷을 검색해도 구글 블로그(Google Blogger)에 애드센스를 게시하는 방법을 자세히 설명한 곳이 없었습니다. 대부분 애드센스를 구글 블로그(Google Blogger)에 설치하기 쉽다며 "가젯"을 통한 (티스토리로 치면 플러그인 같은) 게시 방법을 설명하고 있습니다.

물론 그렇게 하면 좋겠지만 단점으로는 반응형 애드센스를 게시할 수 없으며 본문 안에도 게시할 수 없습니다. "가젯"을 통한 게시는 사이드바나 블로그 상단이나 하단에만 게시가 가능했습니다.

지금 보고 있는 제 구글 블로그(Google Blogger)의 경우 반응형이기 때문에 애드센스 코드도 물론 반응형으로 넣었습니다.

블로그마다 조금씩 코드가 틀리고 제가 알고 있는 것이 틀릴 수 있습니다. 제 개인적인 기록의 의미가 크며 제 글을 읽고 도움이 되었다면 좋겠습니다. 틀린 점이나 더 좋은 방법이 있다면 과감하게 댓글로 알려주시기 바랍니다.

제 본문 상단과 하단에 애드센스가 게시되어 있는데 제 블로그를 기준으로 어떻게 애드센스를 게시했는지 적어보겠습니다.

1. 티스토리의 관리자 화면과 비슷한 구글 블로그의 관리자 화면 입니다. ▲

2. 설정에서 "템플릿"부분으로 가면 위와 같은 화면을 볼 수 있습니다. HTML 편집이라는 부분을 클릭해봅니다. 참고로 제 구글 블로거 템플릿은 반응형이라 모바일 부분을 사용안함으로 해놓았습니다. ▲

3. 저에게 외계어로 보이는 문자가 보입니다. ▲

4. 제 블로그를 기준으로 <div class='post-body entry-content'> 라는 곳 아래에 본문 상단 애드센스 코드를 삽입했습니다. 다른 구글 블로그에서도 동일한 부분에 넣어도 되는지는 잘 모르겠습니다. 찾는 방법은 "Ctrl+F"를 누르면 검색할 수 있는 창이 나타나는데 그곳에 제가 말한 <div class='post-body entry-content'> 을 넣고 엔터를 누르면 됩니다.

아래 제가 넣은 애드센스 코드입니다. 이것을 활용하면 됩니다.

<!-- 애드센스 상단배너 시작 -->
<div style='float:right; margin: 0px 0px 10px 10px'>
<style>
.merrow { width: 336px; height: 280px; }
@media (min-width: 320px) { .merrow { width: 200px; height: 200px; } }
@media (min-width: 468px) { .merrow { width: 250px; height: 250px; } }
@media (min-width: 768px) { .merrow { width: 320px; height: 250px; } }
@media(min-width: 1200px) { .merrow { width: 336px; height: 280px; } }
</style>
<!-- luvpt2_blogspot_1 -->
<ins class='adsbygoogle merrow' data-ad-client='ca-pub-****************' data-ad-slot='**********' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 애드센스 상단배너 끝 -->

반응형 코드이기 때문에 조금 수정해서 넣었습니다.

기존 애드센스 반응형 코드는 아래와 같습니다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- luvpt2_blogspot_1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

저처럼 본문 상단 우측에 반응형 코드를 넣고 싶다면 애드센스 반응형 코드에서
▶ data-ad-client="ca-pub-****************"
▶ data-ad-slot="**********"

이 부분의 숫자만 교체해서 사용하면 됩니다. 지금은 제가 * 으로 표시했지만 실제는 숫자로 이루어져 있습니다. 주석처리 한 부분은 나중에 찾기 쉽게 적은 것이라 편한 것으로 수정해도 됩니다.

제가 활용하라고 올려놓은 코드에 대해서 간단하게 설명을 하자면 일단 반응형 애드센스를 위한 것입니다. 고정형 애드센스는 패스해주세요.

<div style='float:right; margin: 0px 0px 10px 10px'> 애드센스 광고를 본문 우측으로 정렬시켜주며 애드센스 광고 좌측과 하단에 10px의 간격을 줍니다. 상(0px), 우(0px), 하(10px), 좌(10px)의 간격을 설정한 것이라고 생각하면 됩니다. 간격을 더 주고 싶은 부분이 있으면 숫자를 넣어주면 됩니다.

@media (min-width: 320px) { .merrow { width: 200px; height: 200px; } }
@media (min-width: 468px) { .merrow { width: 250px; height: 250px; } }
@media (min-width: 768px) { .merrow { width: 320px; height: 250px; } }
@media(min-width: 1200px) { .merrow { width: 336px; height: 280px; } }

위 코드에 대해서 간략하게 설명을 하자면 블로그를 보는 화면의 크기가 320px 이하일 경우 애드센스 광고의 크기가 가로 200px / 세로 200px로 게시됩니다.

블로그를 보는 화면의 크기가 468px 이하면 가로/세로 250px 광고가 게시가 되구요. 블로그를 보는 화면의 크기가 1200px가 되면 336px * 280px의 광고가 게시가 됩니다.

원하시는 크기가 있다면 애드센스 광고 크기에 맞춰서 가로와 세로 숫자를 수정해주시면 됩니다.

그렇다면 본문 하단에 애드센스는 어떻게 넣었을까요?

<b:include data='post' name='shareButtons'/>를 검색해서 그 아래에 넣었습니다.

<!-- 애드센스 하단배너 시작 -->
<center>
<style>
.merrow { width: 336px; height: 280px; }
@media (min-width: 320px) { .merrow { width: 200px; height: 200px; } }
@media (min-width: 468px) { .merrow { width: 250px; height: 250px; } }
@media (min-width: 768px) { .merrow { width: 320px; height: 250px; } }
@media(min-width: 1200px) { .merrow { width: 336px; height: 280px; } }
</style>
<!-- luvpt2_blogspot_2 -->
<ins class='adsbygoogle merrow' data-ad-client='ca-pub-****************' data-ad-slot='**********' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
<!-- 애드센스 하단배너 끝 -->

본문의 내용과 함께 나오는 것이 아니라 <center>...</center> 코드로 감싸주었습니다. 본문 하단에 반응형으로 애드센스가 게시가 되며 중앙에 정렬됩니다.

이렇게 제 블로그 본문 우측 상단에 애드센스 1개와 하단에 1개 넣는 방법을 적어보았습니다.

※ 구글 블로그는 티스토리 블로그와 다르게 애드센스 코드 중에 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> 라는 부분을 삭제해야 하더라구요. 구글 블로그라 위 코드가 없어도 되는 것 같다라는게 제 개인적인 생각입니다.