애드센스 글 본문(포스트) 바로 위 / 아래에 넣는 방법 - 구글 블로그 반응형 템플릿 Contempo Soho Emporio Notable

애드센스 코드를 글(포스트) 제목과 글 본문 사이 (= 본문 위), 글 본문과 글 푸터 (post-footer) 사이 (= 본문 아래)에 넣으려면 아래와 같이 하면 됩니다. 구글 블로그의 반응형 테마에서는, 이전 템플릿들과는 달리, 애드센스 코드를 직접 HTML에 넣을 수 있습니다.

간략히 말하면, HTML 편집창에서, 글 본문을 불러 오는 <data:post.body/> 코드를 찾아서, 코드 위 또는 아래에 애드센스 코드를 넣으면 됩니다. 다만, 애드센스 코드의 async를 async='async'로 바꾸어 주어야 합니다.


<data:post.body/> 를 찾아 애드센스 코드 삽입하기

>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML)으로 이동하여, HTML 편집창을 열고
>> HTML 편집창의 오른쪽 위에 있는 검색상자에 <data:post.body/>를 입력(복사, 붙여 넣기)하고 [엔터]키를 치면 해당 위치로 이동됩니다.

<data:post.body/>

애드센스 글 본문(포스트) 위 / 아래에 넣는 방법 - 구글 블로그 반응형 템플릿 Contempo Soho Emporio Notable
<data:post.body/> 위치에 글 (포스트) 본문이 보여지므로, 애드센스 코드를 <data:post.body/> 위 또는 아래에 넣으면 됩니다. 곧,

애드센스 광고가 본문 바로 위 (글 제목과 분문 사이)에 보이게 하려면, <data:post.body/>위에 넣고, 광고가 본문 바로 아래 (글 본문과 포스트 푸터 사이)에 보이게 하려면 <data:post.body/> 코드 아래에 넣습니다.



위와 같이 HTML 편집창에서 애드센스 코드를 넣을 때는 아래의 두 가지를 고려하여야 합니다.


1. 애드센스 코드의 async를 async='async' 바꾸기

애드센스 코드를 그냥 넣으면, HTML 편집창에서 오류 메시지가 뜨고 저장이 되지 않습니다. 애드센스 코드의 async 부분을 async='async'으로 바꾸어 주면, 오류 메시지 없이 저장이 됩니다.

[원래의 애드센스 코드 모양]
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
.............................

[바꾼 뒤의 모양]
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
.............................

애드센스 코드를 변경하는 것은 애드센스 정책에 위반 된다는 것은 두 말할 필요가 없을 만큼 모두 알고 있을 것 같습니다. 그러면, 위와 같이 변경하면 애드센스 정책에 위반되는 것인가?

이에 대한 글을 인터넷에서 찾아 보면, 많지는 않지만 몇 개의 글들을 볼 수 있습니다. 위와 같이 변경하는 것은 HTML5 문법에 관한 것이고, 애드센스 코드 자체를 변경하는 것이 아니므로, 애드센스 정책 위반이 아니라는 의견들을 볼 수 있습니다.

문제는 이에 대하여 구글에서 이렇다저렇다 한 내용을 찾아 볼 수 없다는 것입니다. 곧, 구글에서 애드센스 정책 위반이라고 하면 위반인 것이고, 괜찮다고 하면 괜찮은 것입니다. 그러니, 이 방법은 애드센스 게시자 스스로가 판단하고 결정할 수 밖에 없는 일입니다.



2. 광고 여백 설정하기

애드센스 코드를 넣으면, 광고의 여백이 맞지 않을 가능성이 높습니다. 아래와 같이, 애드센스 코드를 <div>태그로 감싸고, 마진(margin) 속성으로 여백을 조절하면 되겠습니다.

아래 첫 번째 예와 같이, 애드센스를 감싼 <div> 태그에서 직접 margin을 설정하여도 되겠고, 두 번째 예와 같이 <div>에 클래스(class)를 지정하여 별도로 margin을 설정하여도 되겠습니다.

[ 예 1. DIV 태그에서 스타일(style) 속성으로 직접 margin을 설정한 예]
<div style="margin: 25px 0px;">
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
..............................
</div>

[ 예 2. DIV 태그에서 클래스(class) 속성으로 margin을 설정한 예]
<div class="post_bottom_ads">
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
..............................
</div>

첫 번째 방식은 HTML 편집창에서 바로 설정을 하므로 편하고, 두 번째 방식은 테마 디자이너에서 시각적으로 보면서 여백을 조절할 수 있으므로 좋습니다.

두 번째 방식으로 할 경우, 클래스(class) 설정은
>> 블로그 대시보드 > 테마(Theme) > 사용자설정(Customize) > 고급설정(Advanced) > CSS추가(Add CSS)로 이동하여, CSS 코드 입력창을 엽니다. (자세한 설명 보기 >>)

위의 예에서 <div class="post_bottom_ads">와 같이 클래스를 post_bottom_ads 로 하였으므로, CSS 입력창에 다음과 같이 입력합니다.

.post_bottom_ads {margin: 25px 0px 15px 0px;}

클래스 앞에는 점(.)을 찍어 줍니다.
마진(margin)에 적용하는 숫자는 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백 순서 입니다.
>> <div> 태그 마진(margin) 설정에 관한 자세한 내용은 링크 페이지를 참조


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


도움이 되기를 바랍니다.