텐핑 광고를 사이드바에 설치하는 과정을 보고자 한다. 티스토리 플러그인에서 텐핑 광고를 추가할 수 있는 기능을 제공해주고 있다. 하지만 PC버전에서도 텐핑 광고를 추가할 수 있는 방법이 있다. 직접 소스를 수정해야 한다는 번거로움이 있지만, 쉽게 적용시킬 수 있으니 방법을 확인해보자.

본문 하단에 텐핑 광고를 추가하는 방법은 이곳에서 확인 가능하다.

바로가기 : 본문 하단에 텐핑 광고 추가

이제 사이드바에 추가하는 방법을 확인해보자. 우선 텐핑 서비스에 가입이 되어 있어야 한다. 혹시 가입이 되지 않은 상태라면 바로가기를 통해서 텐핑부터 가입하자.

바로가기 : 텐핑 가입하기

선배 아이디로는 never-stop@naver.com 를 추천한다.

다시 티스토리에 적용하는 방법을 확인해보자. 텐핑 사이트에서 소문박스를 하나 만든다. 여러 형태의 소문박스 중에서, 본인이 사용하고자 하는 것을 선택한다. 그리고 해당 코드를 복사해 둔다.

이제 티스토리에 넘어와서 사이드바에 해당 소문박스를 넣는 작업을 한다. '꾸미기 - HTML/CSS 편집'으로 가서, HTML 소스를 직접 편집해 본다. 

HTML 소스에서 사이드바 부분을 찾아야 하는데, s_sidebar 로 검색하면 다수의 결과가 나온다. 뭔가 규칙적으로 나오는데, 검색 결과들이 <s_sidebar_element> 로 시작해서 </s_sidebar_element> 로 끝나는 것을 확인 할 수 있다. 우리가 넣고자 하는 텐핑 광고코드도 이 규칙을 사용해야 한다. 이런 구조가 되어야 한다.

<s_sidebar_element>

텐핑광고 소스코드

</s_sidebar_element> 

지금까지 모든 작업을 완료했다면, 나의 티스토리의 사이드바에 텐핑 광고가 잘 나오는 것을 확인할 수 있다.

티스토리에 다양한 광고를 본인이 원하는 위치에 삽입할 수가 있다. 그중에서도, 이번에 알아볼 것은 구글 애드센스 광고를 티스토리의 사이드바에 삽입하는 것이다. 사이드바에 구글 애드센스 광고를 적용하는 방법을 한번 따라해보자.

구글 애드센스에서 사이드바에 등록하기 위한 새로운 광고 하나를 만들어야 한다. 사이드바는 위아래로 길쭉한 모양이므로, 우리가 사용할 광고도 위아래로 길쭉한 모양을 선택해서 만들어야 한다. 사각형모양의 광고를 등록할 수 없는 건 아니지만, 긴 사이드바를 효율적으로 사용하기 위해서는 비슷한 모양을 선택하는 것이 좋다.

다음 작업을 하기위해서 미리 확인해두어야 할 정보가 있다. 내가 가지고 있는 페이지의 사이드바의 크기를 알아야한다. 광고를 사이드바에 넣는 것이므로, 사이드바의 크기를 알아야 광고를 넣을때 크기를 조절해서 적용시킬 수가 있다.

나는 이 부분에서 잠시 작업을 멈출 수밖에 없었다. 내가 사용하고 있었던 스킨이 사이드바를 허용하지 않는 스킨이었다. CSS에서 #sidebar를 검색한 결과를 찾을 수가 없었다. 그래서 스킨을 변경하는 작업을 먼저 진행했다. 스킨변경 이후, 사이드바에 광고 삽입하기 과정을 계속 진행을 하고 있다.

바로가기 : 스킨변경하는 과정 확인

사이드바 배너를 사용하기 위해서는 티스토리에서 플러그인 설정을 해야 한다. 관리 및 통계 항목 중 배너출력을 사용하도록 설정을 한다. 사이드바에 배너를 출력가능하게 해주는 기능이다.

플러그인 설정이 완료되었다면, 다음작업을 진행하면 된다. 꾸미기 - 사이드바 설정을 통해서, 사이드바의 환경을 변경시킨다. 좌측 기본모듈에 보이는 HTML 배너출력을 우측 사이드바에 추가시킨다. + 버튼 클릭으로 이동시킬 수 있다. 

마지막으로 사이드바의 광고에 적절한 HTML소스를 넣는다. 구글 애드센스에서 등록했었던 광고의 코드를 가져와서 붙여넣어준다. 이제 사이드바에 구글 애드센스 광고가 적용이 되었다.

사이드바에 적용되는 광고의 크기는 HTML소스를 변경하여 수정이 가능하다. 소스내의, width:200px;height:600px 부분을 수정해가면서 내 사이드바에 설정할 광고크기를 선택하면 된다.

티스토리에 적용된 사이드바의 애드센스 광고를 확인하다보니, 인터넷 창의 크기에 따라서 사이드바가 아랫부분으로 옮겨지기도 한다. 그럼 글을 보여주는 부분의 길이를 줄이면, 사이드바가 더 오랫동안 보여지지 않을까? 글 부분의 길이 조정을 통해서 사이드바가 어떻게 되는지 확인을 해보는 것을 다음 주제로 삼아야겠다.