티스토리 블로그는 기본적으로 사이드바가 포함되어 있습니다. 이 사이드바는 본문 왼쪽이나 오른쪽에 위치하여 프로필, 카테고리, 인기글, 배너, 태그 등 다양한 정보를 담을 수 있는 공간입니다. 스킨별로 제공되는 사이드바 모듈이 다르긴 하지만 기본적인 모듈은 비슷합니다. 이제, 고래 스킨에서 사이드바 메뉴를 설정하는 방법과 사이드바에 광고를 추가하는 방법에 대해 살펴보겠습니다.
사이드바에 꼭 들어가야 할 항목
- 카테고리
블로그를 운영하다 보면 다양한 주제를 다루게 됩니다. 이를 주제별 카테고리로 분류하여 사이드바에 카테고리를 추가하면, 방문자가 원하는 주제의 글을 더 쉽게 찾을 수 있고, 블로그 전체적인 구성을 파악할 수 있습니다
- 검색
사이드바에 검색창을 추가하여 방문자가 블로그에서 원하는 내용을 쉽게 찾을 수 있도록 합니다. 검색창은 사이드바 상단에 위치하는 게 좋습니다. 검색창은 기본적으로 제공됩니다.
고래 스킨 사이드바 설정하기
티스토리 블로그에 고래 스킨을 설치하고 꾸미기에서 사이드바를 선택합니다. 자신의 블로그에 필요한 사이드바를 추가/삭제하고 위치를 변경합니다.
- 박스 안에 있는 기본 모듈이나 사용자 모듈에서 [+] 눌러 사이드바에 추가할 수 있습니다.
- 박스 안에 있는 사이드바 1에서 메뉴 위치를 이동(삼선) 하거나 메뉴를 제거(-)할 수 있습니다.
사이드바 애드센스 광고 설정하기
사이드바에 구글 애드센스 광고를 설정하는 방법입니다. 고래스킨 기본모듈에 있는 구글 광고 모듈을 사용하려면 HTML에 코드를 추가해야 하니 나중에 설명하고 여기서는 간단하게 배너 출력 플러그인을 이용하는 방법에 대해 알아보겠습니다.
- 블로그관리 > 플러그인 > 배너출력
플러그인에서 배너출력을 선택하고 적용을 클릭합니다.
배너출력 플러그인을 적용하고 다시 사이드바에 들어가 보면 기본 모듈에 이미지 배너출력과 HTML 배너출력 모듈이 추가되어 있는걸 보실 수 있습니다. [플러그인] HTML 배너출력 옆에 [+] 아이콘을 눌러 사이드바 1에 추가합니다.
사이드바1에 추가된 [플러그인] HTML 배너출력에 마우스 포인트를 위치하면 편집 아이콘이 나타납니다.
편집을 누르면 HTML 배너출력 팝업창이 뜨는데 '이름' 입력창에 [사이드 광고] 같은 아무 이름이나 적어줍니다. HTML소스에는 구글 애드센스 > 광고 > 광고단위 기준에서 디스플레이(사각형/수직형), 멀티플렉스(수직형) 광고를 만들고 생성한 광고 코드를 복사해서 "HTML 소스" 입력창에 붙여 넣기 합니다.
사용자 모듈에 저장을 체크하면 좌측 사용자 모듈에 저장됩니다. 변경 사항 저장을 누르고 사이트에 접속하여 사이드바에 광고가 뜨는지 확인합니다. 보통은 몇 분이면 광고가 페이지에 표시되지만 경우에 따라 최대 1시간이 소요될 수 있습니다.
다음은 사이드바에 애드센스 광고가 노출되는 모습입니다.
사이드바 쿠팡 광고 추가 방법
쿠팡 광고를 추가하려면, 먼저 쿠팡 파트너스 계정을 생성해야 합니다. 계정 생성 후, 광고 상품을 검색하여 광고 코드를 발급받습니다
쿠팡 파트너스 가입 시 추천인 코드를 입력하면 기본 커미션 3%에 추가 커미션 1%를 한달간 더 받을 수 있습니다. 필요하신 분은 아래 추천인 코드를 입력하세요.
쿠팡 배너 만들기
쿠팡 파트너스에서 링크 생성 > 다이나믹 배너 생성을 선택합니다. 배너타입과 배너 데이터를 원하는 상품으로 선택하고 크기를 너비 300 * 높이 250(이상)으로 설정하고 배너 만들기를 클릭합니다.
생성된 파트너스 코드를 자바스크립트 태그로 선택하고 복사합니다.
위에서 사이드바 애드센스 광고 추가한 방법과 동일하게 적용합니다.
- HTML 배너출력 추가
- HTML 배너출력 편집
- HTML 소스 입력창에 파트너스 코드 붙여넣기
- 적용
이렇게 아래처럼 사이드바에 쿠팡 광고가 적용된 모습을 확인할 수 있습니다.
마치며
사이드바 설정/편집하는 방법과 사이드바에 애드센스, 쿠팡 파트너스 광고를 추가하는 방법에 대해 알아봤는데요, HTML 배너 출력 모듈을 이용하여 사이드바에 원하는 만큼 광고를 추가할 수 있습니다. 다음 시간에는 자동 목차 생성하는 방법에 대해 알아보겠습니다.