구글 블로그에 애드센스를 본문에 배치하기

요약: 이 글은 새 구글 블로그(New Blogger)에서 구글 애드센스(AdSense) 광고를 배치하는 방법에 관한 글이다.

새 Blogger에서 AdSense를 배치시키는 방법 중 가장 간단한 것은 레이아웃에서 "페이지 요소 추가"를 통해 AdSense를 추가하는 것이다. 몇 번의 마우스 클릭만으로 애드센스를 추가할 수 있다.

오늘 소개하는 방법은 좀 더 복잡한 방법에 관한 내용이다. 보통 블로그는 각 글마다 고유한 주소를 갖고 있는데 이럴 경우 글의 제목, 본문, 커멘트 및 덧글의 순으로 표현되는 것이 일반적인 형태이다. 애드센스를 사용하는 유저들 중에는 다양한 배치를 하는 사람들이 많은데 많이 사용되는 방법 중 하나가 글의 제목과 본문 사이, 혹은 본문과 커멘트 사이에 광고를 배치하는 것이다.

12월 20일부터 베타 딱지를 뗀 구글의 새 블로거(Blogger)에서 AdSense를 어떻게 본문에 배치시킬 수 있는지 이번 글에서 알아보려고 한다.

단계 1. 애드센스를 배치할 곳을 찾기 (제목과 본문 사이에 배치할 경우)

• 블로거의 템플릿에서 HTML 편집을 클릭한 후 "도구 템플릿 확장"을 선택한다.
• <div class='post-body'>라고 되어 있는 부분을 찾는다. 새 Blogger에서 기본으로 제공되는 템플릿을 사용하고 있다면 아래와 같이 되어 있을 것이다.

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>

• 이 부분을 아래와 같이 수정한다.

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<----애드센스 코드가 들어가야 할 부분. 배치방법을 계속 보자.
<p><data:post.body/></p>
<b:else/>
<p><data:post.body/></p>
</b:if>
<div style='clear: both;'/>

단계 2. 애드센스 배치 방법
애드센스를 배치하는 각기 다른 세 가지 방법을 소개한 블로그를 찾아볼 수 있었다. (테이블을 사용하는 방법, div를 사용하는 방법, div와 CSS를 사용하는 방법) 공통적인 부분은 동일하지만, 선호하는 방법에 따라 사용하도록 하자.(다음의 2.1, 2.2, 2.3 중 한 가지 방법을 선택하여 따라가면 되겠다.)

2.1 div 태그와 CSS를 사용하는 방법
먼저 div 태그와 CSS를 사용하는 방법을 소개하기로 한다. 템플릿에서 ]]></b:skin>태그가 있는 부분을 찾아 그 앞에 아래의 코드를 추가한다.

.adv
{
float:left;
padding-right:10px;
padding-right:10px;
}

단계 1에서 설명한 애드센스 코드가 들어가야 하는 부분에 다음의 부분을 추가하자.

<div class='adv'>
실제 애드센스 코드 (단계 3을 꼭 참조하시라.)
</div>


2.2 div 태그만 사용하는 경우
단계 1에서 설명한 애드센스 코드가 들어가야 하는 부분에 다음의 코드를 추가하자.

<div style="float: left;">
실제 애드센스 코드 (단계 3을 꼭 참조하시라.)
</div>

2.3 테이블을 사용하는 경우
단계 1에서 설명한 애드센스 코드가 들어가야 하는 부분에 다음의 코드를 추가하자.

<table align="'left'"><tr><td align="'left'">
실제 애드센스 코드 (단계 3을 꼭 참조하시라.)
</td></tr></table>

단계 3. 템플릿을 저장하기 전에
복사해 온 애드센스 광고의 코드는 아래처럼 되어 있는데, 주석의 <와 >를 수정해 주지 않으면 정상적으로 애드센스 광고가 보이지 않는다.

<script type='text/javascript'><!--
애드센스 관련 파라미터
//--></script>
< script src='http://xxxxxx.js'
type='text/javascript'>
</script>

<!-- 를 ＆lt;!--로, //--> 를 //--＆gt;로 변경한다. (이 부분은 카피하지 말고 직접 입력하세요. 화면에 보이게 하기 위해 전각문자를 사용했습니다.)


단계 4. 배치 방법 조절
div(혹은 div + CSS) 태그를 사용하는 경우, float:left를 float:right로 바꾸면 광고가 오른쪽에 본문이 광고의 왼쪽에 배치되고, float:left 부분을 지우면 광고의 아래에 블로그의 본문이 시작된다.

이 포스트에서 소개된 방법 중 테이블을 사용하는 경우에는 항상 본문과 제목 사이에만 배치되고 광고의 옆에 본문을 배치할 수는 없다. div 태그를 쓰지 않고는 이런 형태의 배치는 어려워 보인다.