티스토리, 쉽게하는 사이드바 관리로 세로형 애드센스 추가하기

지금 보고 있는 블로그를 보면 애드센스 배너가 상단 우측에 하나, 본문 하단에 가로형 배너가 있다. 그리고 우측 세로형 배너가 있는데 본문 위, 아래에 애드센스를 삽입하는 방법은 티스토리 플러그인을 시용하면 어렵지 않게 관리 할 수 있다.

티스토리에 애드센스 넣는 가장 쉬운 방법
http://zibsin.net/328

그런데 안타깝게도(?) 우측 사이드바에는 플러그인을 제공해 주지 않는다. 이부분은 어쩔 수 없이 HTML/CSS  편집을 직접 해 주어야 한다. 하지만 이것도 잘 살펴보면 그리 어렵지 않다.

 

 

 

 

보통은 사이드바에 직접 제작한 배너를 삽입하거나 새로운 콘텐츠를 추가 할 때는 아래 예제처럼 노출 되는 모듈 소스 안에 본인의 코드를 작성하게 된다.

<s_sidebar_element>
        <!-- 태그목록 모듈 -->
         <div class="module module_tag">
          <h3>Tag Cloud</h3>
          <ul class="contents">
           <s_random_tags>
            <li><a href="" class=""> </a></li>
           </s_random_tags>
          </ul>
         </div>

 

          <div>** 많은 사람들이 이렇게 모듈 태그 안에 자기가 직접 코드를 작성하기도 한다. **</div>
        </s_sidebar_element>

 

위의 방법대로 해도 문제는 없지만 일단 사용자가 추가한 사이드바 모듈을 관리 할 때 직접 작성한 코드도 함께 움직이기 때문에 관리에 어려움이 있다.

 

 

 

사이드바에 사용자 정의 모듈을 추가한다.

<s_sidebar>

skin.html 편집 창에서 코드를 아래로 내리면 <s_sidebar> 이런 태그가 보여진다. 그리고 <s_sidebar> 이 태그 안에는 <s_sidebar_element> ~ </s_sidebar_element> 이렇게 사이드바 모듈의 시작 태그와 닫는 태그가 있다. 사이드바 모듈 태그를 하나 생성하고 그 안에 애드센스 코드를 삽입한다. 모듈 태그의 위치는 <s_sidebar> ~ </s_sidebar> 안에 있다면 어느 곳이든 상관 없다.

 

지금 보고 있는 나의 블로그처럼 사이드바가 두 개라면 <s_sidebar> 태그도 두 개가 있다. 첫번째든 두번째든 상관 없기 때문에 일단 어디에든 <s_sidebar> ~ </s_sidebar>안에 위치하기만 하면 된다.

 

<s_sidebar>

    .....

 

 

    <s_sidebar_element>

    <!-- 애드센스 세로 -->
    <script type="text/javascript"><!--

        google_ad_client = "ca-pub-319213481*********";
         /* [느풍]오른쪽-세로 */
         google_ad_slot = "09499******";
         google_ad_width = 160;
         google_ad_height = 600;
     //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

    </s_sidebar_element>

 

     .....

     .....

    <s_sidebar_element>

         .....

    </s_sidebar_element> 

</s_sidebar> 

 

이렇게 애드센스 세로형 배너 사이드바 모듈을 생성한다.

<!-- 애드센스 세로 --> 여기서 이 주석이 매우 중요하다.  이 주석은 관리자 페이지에서 사이드바를 관리 할 때 사이드바 모듈의 이름이 된다.

관리자 페이지에서 사이드바 관리 메뉴 화면이다. 이미지의 별 표시 부분을 보면 주석이 모듈 이름이 된 것을 볼 수 있다. 이렇게 나왔다면 이제 사이드바 애드센스 모듈은 다른 모듈과 마찬가지로 사이드바에 추가 하거나 자유자제로 위치를 변경 할 수 있다. 애드센스 뿐만 아니라 다른 사용자 모듈도 이렇게 관리하면 매우 편리하고 빠르다.