구글 애드센스 스크립트 코드 삽입 위치 - 포스트 상단

 

  구글 애드센스로부터 광고 게재 승인 연락이 오면 가장 먼저 해야할 것이 자신의 광고 코드를 생성하여 블로그의 적절한 위치에 스크립트 코드를 붙여넣기 하는 것입니다. HTML 에 대해 조금이라도 아시는 분이시라면 위치를 찾아 붙여넣기 하는 것은 식은 죽 먹기지만 처음 접하시는 분들께는 대단히 어려운 작업일 겁니다.

 

 

  광고 스크립트 코드를 삽입하는 것은 어려운 일이 결코 아닙니다. HTML 소스 내에서 위치를 찾은 후에 그대로 붙여넣기 하면 되니깐요. 하지만 그 위치를 모르시는 분들이 계시는 것 같아 제가 간단하게 설명을 드리겠습니다. (설명은 광고 생성 후에 스크립트 코드를 받았다는 전제하에 진행됩니다.)

 

 

1. Tistory 관리 센터 - 꾸미기 - HTML/CSS 편집 에 들어갑니다.

 

  화면에는 2개의 창이 보입니다. skin.html 과 style.css 입니다. 광고 스크립트 코드는 skin.html 속에 삽입해야하기 때문에 style.css 는 건드리지 않습니다.

 

 

 

2. Ctrl + F 키를 눌러 '찾기' 에서 'article' 을 검색합니다.

 

 

 

 

 

 

3. HTML 소스를 직접 가져와 한눈에 보기 쉽게 설명해드리겠습니다.

 

 

 

<h3><span class="subs">구글 애드센스 스크립트 코드 삽입 위치 - 포스트 상단</span><span class="subj"><a href="/entry/%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%82%BD%EC%9E%85-%EC%9C%84%EC%B9%98-%ED%8F%AC%EC%8A%A4%ED%8A%B8-%EC%83%81%EB%8B%A8">구글 애드센스 스크립트 코드 삽입 위치 - 포스트 상단</a></span></h3> ← 글 제목 부분입니다.
     <span class="info">
      Posted at <span class="date">2015. 7. 7. 11:55</span> 

     </span>
    </div>

    <div class="protectedWrapper">
     <div class="article">
      <p class="hdProtected">
       보호되어 있는 글입니다. <br />
       내용을 보시려면 비밀번호를 입력하세요.
      </p>
      <p>
       <input type="password" maxlength="16" id="entry517password" name="entry517password" value="" onkeydown="if (event.keyCode == 13) {reloadEntry(517);return false;}" class="input" onfocus="this.className='input_on'" onblur="this.className='input'" />
       <a class="submit" onclick="{reloadEntry(517);return false;}">UNLOCK!</a>
      </p>
     </div>
    </div><!--//protectedWrapper-->
   </div><!--//entryProtected-->
  </s_article_protected> ← 여기까지 블로거가 게시글을 '비공개' 등록했을 때를 위한 HTML 소스입니다.
 
 </div><!--//nonEntry-->
   
  <s_article_rep>
   <div id="entry">
    <div class="titleWrap">
     <h2><span class="subs">구글 애드센스 스크립트 코드 삽입 위치 - 포스트 상단</span><span class="subj"><a href="/entry/%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%82%BD%EC%9E%85-%EC%9C%84%EC%B9%98-%ED%8F%AC%EC%8A%A4%ED%8A%B8-%EC%83%81%EB%8B%A8">구글 애드센스 스크립트 코드 삽입 위치 - 포스트 상단</a></span></h2>
     <span class="info">
      Posted at 2015. 7. 7. 11:55 | 
      Posted in <a href="/category/%EB%B8%94%EB%A1%9C%EA%B7%B8/%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4" class="category">블로그/애드센스</a>
     </span> ← 여기까지 제목 바로 하단 POSTED AT, POSTED IN 부분입니다.
     <s_ad_div>
      <div class="admin">     
       <a href="">수정</a> :
       <a href="#" onclick="">수정(새창)</a> |  ()→
       <a href="#" onclick=""></a> |
       <a href="#" onclick="">트랙백</a> |
       <a href="#" onclick="">삭제</a>
      </div><!--//admin-->
     </s_ad_div> ← 여기까지 게시글 수정, 삭제 등 게시글 관리 파트입니다.
    </div><!--//titleWrap-->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 포스트 상단 광고 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

    <div class="article"> ← 여기서부터 게시글 내용입니다.
     

 

  구글 애드센스로부터 광고 게재 승인 연락이 오면 가장 먼저 해야할 것이 자신의 광고 코드를 생성하여 블로그의 적절한 위치에 스크립트 코드를 붙여넣기 하는 것입니다. HTML 에 대해 조금이라도 아시는 분이시라면 위치를 찾아 붙여넣기 하는 것은 식은 죽 먹기지만 처음 접하시는 분들께는 대단히 어려운 작업일 겁니다.

 

 

  광고 스크립트 코드를 삽입하는 것은 어려운 일이 결코 아닙니다. HTML 소스 내에서 위치를 찾은 후에 그대로 붙여넣기 하면 되니깐요. 하지만 그 위치를 모르시는 분들이 계시는 것 같아 제가 간단하게 설명을 드리겠습니다. (설명은 광고 생성 후에 스크립트 코드를 받았다는 전제하에 진행됩니다.)

 

 

1. Tistory 관리 센터 - 꾸미기 - HTML/CSS 편집 에 들어갑니다.

 

  화면에는 2개의 창이 보입니다. skin.html 과 style.css 입니다. 광고 스크립트 코드는 skin.html 속에 삽입해야하기 때문에 style.css 는 건드리지 않습니다.

 

 

 

2. Ctrl + F 키를 눌러 '찾기' 에서 'article' 을 검색합니다.

 

 

 

 

 

 

3. HTML 소스를 직접 가져와 한눈에 보기 쉽게 설명해드리겠습니다.

 

 

 

<h3><span class="subs"></span><span class="subj"><a href=""></a></span></h3> ← 글 제목 부분입니다.
     <span class="info">
      Posted at <span class="date"></span> 

     </span>
    </div>

    <div class="protectedWrapper">
     <div class="article">
      <p class="hdProtected">
       보호되어 있는 글입니다. <br />
       내용을 보시려면 비밀번호를 입력하세요.
      </p>
      <p>
       <input type="password" maxlength="16" id="" name="" value="" onkeydown="if (event.keyCode == 13) " class="input" onfocus="this.className='input_on'" onblur="this.className='input'" />
       <a class="submit" onclick="">UNLOCK!</a>
      </p>
     </div>
    </div><!--//protectedWrapper-->
   </div><!--//entryProtected-->
  </s_article_protected> ← 여기까지 블로거가 게시글을 '비공개' 등록했을 때를 위한 HTML 소스입니다.
 
 </div><!--//nonEntry-->
   
  <s_article_rep>
   <div id="entry">
    <div class="titleWrap">
     <h2><span class="subs"></span><span class="subj"><a href=""></a></span></h2>
     <span class="info">
      Posted at | 
      Posted in <a href="" class="category"></a>
     </span> ← 여기까지 제목 바로 하단 POSTED AT, POSTED IN 부분입니다.
     <s_ad_div>
      <div class="admin">     
       <a href="">수정</a> :
       <a href="#" onclick="">수정(새창)</a> |  ()→
       <a href="#" onclick=""></a> |
       <a href="#" onclick="">트랙백</a> |
       <a href="#" onclick="">삭제</a>
      </div><!--//admin-->
     </s_ad_div> ← 여기까지 게시글 수정, 삭제 등 게시글 관리 파트입니다.
    </div><!--//titleWrap-->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 포스트 상단 광고 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

    <div class="article"> ← 여기서부터 게시글 내용입니다.
     
    </div>

 

 

  위 노란상자에서 붉은색 폰트가 광고 스크립트 코드입니다. 이해하기 쉬우시라고 코드를 통째로 가져와 설명드렸습니다. 이제 설명을 한줄로 요약해드리겠습니다. 대부분의 티스토리 블로그는 구조가 아래와 같습니다.

 

  게시글 제목

  게시글이 작성된 날짜, 시간 │ 게시글이 작성된 카테고리

  게시글 수정, 삭제, 트랙백 등 관리파트

 

 따라서 HTML 소스를 조금만 주의깊게 보시면 구조를 바로 파악하실 수 있습니다. 광고 삽입 위치는 개인마다 틀리겠지만 보통 포스트 상단에 삽입한다는 전제 하에 말씀드리면 '게시글 관리파트' 바로 하단에 삽입하는 겁니다.

 

그럼 위와 같이 광고를 삽입하면 어떻게 광고 게재가 되는지 한번 볼까요?

 

 

  광고 게재는 성공적으로 잘 되었으나 뭔가 너무 왼쪽과 위에 딱 붙어있죠? 광고가 적절한 위치에 배치가 잘 되었으면 그 다음에 해야할 것이 바로 블로그에 맞게 '보기 좋게' 위치 조절을 해주는 겁니다.

 

위치조절은 HTML 정렬 태그 를 이용합니다.

 

<center> 광고코드 </center> : 가운데 정렬

 

<p align="right"> 광고코드 </p> : 우측 정렬

 

<br> : 한칸 아래로 (Enter 와 같은 개념)

 

&nbsp : 공백 처리

 

 

  대표적으로 위 4가지를 이용해 정렬합니다. 블로거들은 대부분 우측 정렬 태그를 사용하여 광고를 오른쪽 정렬하는 경우가 많습니다. 저같은 경우는 포스트 상단에 광고를 나란히 2개 삽입하였습니다. 광고 게재 갯수나 위치는 어디까지나 블로거 본인 마음이니깐요.

 

 

 

설명이 정말 길었습니다. 간단하게 설명을 해드린다는 것이 너무 길어졌네요. 잘 이해를 하셨는지 모르겠습니다. 본 게시글에서는 포스트 상단에 광고를 삽입하는 방법에 대해 설명하였습니다. 상단 이외에 사이드바나 포스트 하단에 삽입하는 방법도 추후 따로 포스팅하겠습니다.

 

궁금하신 점 댓글 또는 방명록에 남겨주시면 언제든지 답변 드리겠습니다.^^

 

 

 

            

    </div>

 

 

  위 노란상자에서 붉은색 폰트가 광고 스크립트 코드입니다. 이해하기 쉬우시라고 코드를 통째로 가져와 설명드렸습니다. 이제 설명을 한줄로 요약해드리겠습니다. 대부분의 티스토리 블로그는 구조가 아래와 같습니다.

 

  게시글 제목

  게시글이 작성된 날짜, 시간 │ 게시글이 작성된 카테고리

  게시글 수정, 삭제, 트랙백 등 관리파트

 

 따라서 HTML 소스를 조금만 주의깊게 보시면 구조를 바로 파악하실 수 있습니다. 광고 삽입 위치는 개인마다 틀리겠지만 보통 포스트 상단에 삽입한다는 전제 하에 말씀드리면 '게시글 관리파트' 바로 하단에 삽입하는 겁니다.

 

그럼 위와 같이 광고를 삽입하면 어떻게 광고 게재가 되는지 한번 볼까요?

 

 

  광고 게재는 성공적으로 잘 되었으나 뭔가 너무 왼쪽과 위에 딱 붙어있죠? 광고가 적절한 위치에 배치가 잘 되었으면 그 다음에 해야할 것이 바로 블로그에 맞게 '보기 좋게' 위치 조절을 해주는 겁니다.

 

위치조절은 HTML 정렬 태그 를 이용합니다.

 

<center> 광고코드 </center> : 가운데 정렬

 

<p align="right"> 광고코드 </p> : 우측 정렬

 

<br> : 한칸 아래로 (Enter 와 같은 개념)

 

&nbsp : 공백 처리

 

 

  대표적으로 위 4가지를 이용해 정렬합니다. 블로거들은 대부분 우측 정렬 태그를 사용하여 광고를 오른쪽 정렬하는 경우가 많습니다. 저같은 경우는 포스트 상단에 광고를 나란히 2개 삽입하였습니다. 광고 게재 갯수나 위치는 어디까지나 블로거 본인 마음이니깐요.

 

 

 

설명이 정말 길었습니다. 간단하게 설명을 해드린다는 것이 너무 길어졌네요. 잘 이해를 하셨는지 모르겠습니다. 본 게시글에서는 포스트 상단에 광고를 삽입하는 방법에 대해 설명하였습니다. 상단 이외에 사이드바나 포스트 하단에 삽입하는 방법도 추후 따로 포스팅하겠습니다.

 

궁금하신 점 댓글 또는 방명록에 남겨주시면 언제든지 답변 드리겠습니다.^^