[구글 블로그 꾸미기] 구글 블로그(blogger)의 본문 좌우측과 상하단에 애드센스광고 배치하기/html파서

[구글 블로그 꾸미기] 구글 블로그(blogger)의 본문 좌우측과 상하단에 애드센스광고 배치하기

 티스토리에 애드센스다는 법에 관해서는 많은 사람들이 다루어왔고 지금도 계속 좋은 정보들이 올라오고 있으나 유독 구글블로그(blogger)본문내에 애드센스(adsense)를 배치하는 것에 대해서는 상당히 어려워하는 것 같아보인다. 몇 몇 사람들이 쓴 구글블로그에 애드센스다는 법을 살펴보니 대부분 레이아웃에서 가젯형식으로 사이드바나 상하단에 배치하는 간단한 방식만 설명하고 있다.  정작 애드센스 광고수익과 직결되는 본문안에 자유롭게 배치하는 법에 대해서는 거의 다루고 있지 않아 여기서 생활 노하우 정보실의 예를 들어 구글블로그(blogspot)의 본문내에 애드센스를 배치하는 것에 관해 설명하고자 한다.

모바일광고를 위해 많은 사람들이 글을 쓸 때마다 본문내에 직접 반응형애드센스코드를 삽입하는 경우도 상당수 있는 것으로 알고 있다. 하지만 대부분은 그런 번거로운 작업을 하지 않고 스킨편집을 해서 애드센스광고가 나오게 하는 것을 선호할 것이다. 구글블로그의 템플릿은 티스토리의 스킨과 비슷하지만 서로 차이가 있다. 티스토리 스킨은 html방식이지만 구글블로그 템플릿은 xml방식이라 구글애드센스코드를 그냥 넣으면 본문내에 광고가 제대로 나오지 않는다. 이것을 xml에 맞는 코드로 변환할 필요가 있다.  이글 하단의 html파서를 이용하면 되는데 이것은 구글정책에 위반되는 인위적인 코드변경이 아니니 안심해도 된다. 티스토리도 백업파일로 저장할 경우 xml로 저장되는데 본문 게시글에 직접 삽입한 애드센스코드도 자연스럽게 xml코드로 변환된다. 이전에 모바일광고를 위해 본문마다 애드센스코드를 삽입할 필요가 있었는데 몇 천건의 글에 일일이 삽입하기가 힘들어 백업파일에 직접 애드센스코드를 삽입하여 복원시켜보니 광고가 나오지 않아서 백업파일속에 원래 있었던 xml로 변환된 애드센스코드로 모두 바꿔서 넣으니 정상적으로 광고가 나왔다.( 블로그 전체의 본문마다 구글 애드센스삽입하는 간단한 방법-모바일 블로그에도 광고달기)구글블로그 템플릿에도 이와 같은 방식을 써야만 본문내에 광고가 나오게 된다.

1. 구글블로그 본문상단 제목과 게시글 사이에 애드센스 배치하기

구글 블로거(blogger)에 들어가 대시보드>템플릿>HTML편집을 눌러서 편집창이 나오면 편집창안에 마우스커서를 놓고 Ctrl+F를 눌러 <div class='post-header-line-1'/>를 찾아 </div> 아래에 다음 애드센스코드를 넣는다.  먼저 자신의 애드센스 코드는 하단 4번에 있는 html파서로 변환시켜서 넣어야 한다. 중앙에 위치시키기 위해 <center>애드센스코드</center> 방식으로 하였다. 
 

&lt;center&gt;&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

&lt;!-- 336x280, googleblog1  3/16/09 --&gt;

&lt;ins class=&quot;adsbygoogle&quot;

     style=&quot;display:inline-block;width:336px;height:280px&quot;

     data-ad-client=&quot;ca-pub-1234567890123456&quot;

     data-ad-slot=&quot;1234567890&quot;&gt;&lt;/ins&gt;

&lt;script&gt;

(adsbygoogle = window.adsbygoogle || []).push({});

&lt;/script&gt;&lt;/center&gt;

2. 구글블로그 본문 좌우측에 애드센스 배치하기

템플릿에서 <data:post.body/>를 찾아 2번째의 <data:post.body/>를 다음과 같이 바꾼다. 광고를 글 왼쪽에 위치시키기 위해서 <div style='float:left;'>로 하고 오른쪽에 하고 싶으면 <div style='float:right;'> 로 한다. 오른쪽의 글과 광고의 구분을 두기 위해 Padding-right: 10px로 하였고 만일 광고가 오른 쪽에 있을 경우에는 Padding-left: 10px로 여백을 주면 된다.
 

<div expr:id='&quot;aim1&quot; + data:post.id'/>

<div style='MARGIN: 5px; Padding-right: 10px; FLOAT: left'>

<div style='float:left;'>

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

&lt;!-- 336x280, googleblog2  3/16/09 --&gt;

&lt;ins class=&quot;adsbygoogle&quot;

     style=&quot;display:inline-block;width:336px;height:280px&quot;

    data-ad-client=&quot;ca-pub-1234567890123456&quot;

    data-ad-slot=&quot;1234567890&quot;&gt;&lt;/ins&gt;

&lt;script&gt;

(adsbygoogle = window.adsbygoogle || []).push({});

&lt;/script&gt;</div>

</div>

<div expr:id='&quot;aim2&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);

var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);

var s=obj1.innerHTML;

var r=s.search(/\x3C!-- adsense --\x3E/igm);

if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}

</script>

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

이번에는 Ctrl+F를 눌러 post-footer-line를 찾으면 블로그 스킨마다 약간씩 다른데 <div class='post-footer-line post-footer-line-2'>나 <div class='post-footer-line post-footer-line-3'>까지 나올 것이다. 여기서는 <div class='post-footer-line post-footer-line-3'>까지 나왔기 때문에 여기 아래에  다음 코드를 아래 그림과 같이 배치한다.

&lt;center&gt;&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

&lt;!-- 336x280, googleblog3  3/16/09 --&gt;

&lt;ins class=&quot;adsbygoogle&quot;

     style=&quot;display:inline-block;width:336px;height:280px&quot;

     data-ad-client=&quot;ca-pub-1234567890123456&quot;

     data-ad-slot=&quot;1234567890&quot;&gt;&lt;/ins&gt;

&lt;script&gt;

(adsbygoogle = window.adsbygoogle || []).push({});

&lt;/script&gt;&lt;/center&gt;

모두 수정했으면 위의 템플릿저장버튼을 누르면 저장된다.

4. html코드변환기(html파서)

아래칸에 원래의 애드센스코드를 넣으면 xml코드로 자동변환된다.

 Enter raw code here


Get escaped code here

This HTML escape tool is brought to you by BloggerSentral.com