FastBoot 사이드바에 애드센스 광고 넣는 방법

 사이드바에 광고를 넣는 방법은 생각보다 어렵지 않다.

 이는 티스토리 관리 페이지에서 사이드바에 html배너를 통해 애드센스 광고를 쉽게 넣을 수 있도록 방법을 지원해주기 때문이다.

 사이드 바에 광고 넣는 방법

 하지만 몇몇 스킨들은 이 방법으로 넣을 경우 약간은 모양이 이상해 보일 수가 있는데 이런 경우는 직접 코드를 수정하는 방법을 통해서 넣는 쪽이 조금 더 자연스러울 수 있다.

 여기서는 이 블로그에서 사용하고 있는 FastBoot 스킨의 사이드바에 광고를 넣는 방법을 설명하고자 한다.

 다른 스킨들도 대체적으로 넣는 방식은 비슷하다고 볼 수 있으나 스킨에 따라서 찾아야 하는 위치나 수정 코드가 다를 수 있기 때문에 다른 스킨을 사용하고 있다면 참고하는 용도로 보면 되겠다.

▷ FastBoot 사이드바에 애드센스 광고 넣는 방법

 코드를 수정해야 하기 때문에 관리 페이지의 HTML/CSS 편집으로 들어가자.

 편집에 들어가면 코드를 찾아야 하는데 <s_sidebar_element>를 검색하면 중간 약간 아래쪽 부분에서 해당 코드를 찾을 수 있을 것이다.

<s_sidebar_element> 시작하는 것은 다 사이드바 모듈이라고 보면 된다.

 <s_sidebar_element> 시작해서 </s_sidebar_element> 로 끝나는 것이 사이드바의 모듈 하나라고 보면 되는데, 여기서는 애드센스를 추가해야 하는 것이기 때문에 아무거나 하나를 복사해서 기존의 코드를 지우고 그 사이에 애드센스를 넣어 편집한 코드를 넣으면 된다.

 코드 사용 예)

<s_sidebar_element>

<!-- 애드센스 광고 모듈-->

<div class="panel panel-default">

 <h4 class="panel-heading"><i class="fa fa-random"></i> AdSense</h4>

  <div class="panel-body" align="center">

  <!--광고 -->

  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

  <ins class="adsbygoogle"

                style="display:block"

                data-ad-client="                 "

                data-ad-slot="          "

      data-ad-format="auto"></ins>

  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

  </div>

 </div>

</s_sidebar_element>

 만약 설명이 부족하여 코드를 어떻게 넣어야 할지 애매하다면 첨부해놓은 텍스트 파일에 애드센스 코드 부분만 수정하여 <s_sidebar_element> </s_sidebar_element> 모듈이 모여있는 중간에 추가하면 된다.

fastboot 사이드바 애드센스 모듈.txt

이런 식으로 추가

 여기서 빨간색 글씨로 해놓은 <i class="fa fa-random"> 부분은 사이드바 화면에 들어가는 아이콘 모양으로 해당 명칭을 변경 함으로서 아이콘 모양을 변경 할 수 있다. 아이콘의 모양과 해당 명칭 코드는 여기서 볼 수 있다.

 또한 그 옆의 </i> AdSense</h4> 부분은 원하는 명칭으로 변경해서 넣으면 된다.

빨간 부분이 수정되는 부분