구글 블로그 반응형 테마, 애드센스를 본문 위 왼쪽/오른쪽 끼워 넣는 방법

광고를 게제한 블로그나 사이트들 가운데 아래 그림과 같이 광고를 본문의 왼쪽이나 오른쪽에 끼워 놓은 경우를 흔히 볼 수 있습니다. 구글 블로그 반응형 테마에서는 이전 테마(템플릿)와는 달리 그렇게 할 수 있습니다.

아래에서 설명하는 방법으로 애드센스 광고단위를 삽입해 본 결과, 배경색을 회색으로 한 본문 영역이 애드센스 영역을 조금도 가리지 않고, 애드센스 영역에 마우스를 올리면 마우스가 활성화 되는 것을 볼 수 있습니다. 정상적으로 작동할 것으로 짐작됩니다.

방법은 간단합니다.
HTML 편집창에서 애드센스 광고 단위 코드를 블로그 본문 영역 위에 놓고, 광고 코드를 DIV로 감싼 뒤에, 그 DIV에 float 속성을 주면 됩니다.


1. 방법 1: HTML에서 직접 속성 주기

<div style="width:336px;  float:left;  margin: 0em 2em 1.5em 0em;">
............. 애드센스 등의 광고 코드 ..................
</div>

광고를 왼쪽에 놓으려면 float: left
광고를 오른쪽에 놓으려면 float: right

>> 반응형 테마에서 애드센스 광고단위를 본문의 위 또는 아래에 넣는 방법을 설명한 페이지 보기



2. 방법 2: 광고코드를 DIV로 싸고, DIV에 클래스(class)를 설정하여, 테마-디자이너에서 속성을 주는 방법

(1) HTML 편집창에서 광고 코드 넣기

<div class="top-ad">
............. 애드센스 등의 광고 코드 ..................
</div>

(2) 블로그 테마-디자이너에서 클래스(class) 속성주기

.top-ads {width:336px; float:left;  margin: 0em 2em 1.5em 0em;}

광고를 왼쪽에 놓으려면 float: left
광고를 오른쪽에 놓으려면 float: right

>> 반응형 테마에서 애드센스 광고단위를 본문의 위 또는 아래에 넣는 방법을 설명한 페이지 보기
>> DVI 영역을 왼쪽 / 오른쪽에 위치시키고 아래쪽 내용을 옆으로 달아 올리는 방법을 설명한 페이지 보기 
>> DIV 태그 여백(margin) 설정 방법을 설명한 페이지 보기


참고: 반응형 광고단위의 경우, 광고영역 너비를 300px로 주면, 애드센스는 300x600 광고단위를 보여주게 되므로, 너비를 336px로 주어 336x280 광고 단위가 게제되도록 하는 것이 더 잘 어울리지 않겠는가 싶습니다.