본문 바로가기
투잡도전/쿠팡파트너스

티스토리 사이드바에 쿠팡 파트너스 배너 삽입하기 (북클럽 스킨)

by ♥︎♥︎ 해이나 ♥︎♥︎ 2020. 12. 12.
반응형

티스토리 사이드바에 고객 관심 기반의 쿠팡 파트너스 배너를 삽입했다. 티스토리 어드민에서 플러그인을 제공하기 때문에 html, css 지식이 없어도 쉽고 빠르게 삽입이 가능하다. 같이 따라해 보자!


티스토리 사이드바에 쿠팡 배너 삽입하는 방법

가장 먼저 쿠팡 파트너스 웹사이트에 방문해서 티스토리에 넣을 배너 링크를 생성해야 한다. 쿠팡 파트너스 회원만 배너 생성이 가능하므로 아직 회원가입을 하지 않았다면, 회원가입 - 사이트 등록 등의 과정을 거쳐야 한다. 

쿠팡 파트너스 웹사이트로 이동 > 로그인까지 마쳤다면 상단 카테고리에서 링크 생성 > 다이나믹 배너 카테고리를 클릭한다.

 

 

다이나믹 배너 페이지에서 우측 상단의 + 배너 생성 버튼을 클릭한다.

 

 

이 페이지에서 티스토리에 삽입할 배너를 생성할 수 있다. 배너 제목에는 본인이 알아볼 수 있도록 적당한 이름을 넣는다. 배너 타입도 취향에 맞게 고를 수 있다. (개인적으로는 고객 관심 기반 추천이 가장 효율이 좋을 것 같았다) 다음으로 배너 데이터와 사이즈를 결정한다. 너비값과 높이값을 입력하면 우측의 미리보기 창에서 배너 레이아웃 예시를 확인할 수 있다. 

나는 북클럽 스킨을 사용하고 있는데, 쿠팡 파트너스 배너가 사이드바와 동일한 너비값을 가졌으면 해서 230을 넣었다. 높이는 입맛에 따라 세로로 길게 할 수도 있고, 가로로 납작하게 할 수도 있고, 정사각형으로 할 수도 있다.

 

 

마음에 드는 배너를 완성했다면 배너 만들기 버튼을 클릭한다. 아래 나오는 html 소스를 일단 복사해 두자. 배너 링크 생성이 완료되었다.

 

 

다음으로 티스토리 관리자 > 플러그인으로 이동하여 '배너 출력' 플러그인을 찾는다. 플러그인을 선택하여 활성화시켜주고 다시 관리자 > 꾸미기 > 사이드바 카테고리로 이동한다.

 

 

좌측 기본 모듈의 [플러그인] HTML 배너출력 모듈을 원하는 사이드바에 넣는다.

 

 

우측 사이드바에서 해당 모듈의 위치를 설정하고 편집 버튼을 클릭한다.

 

 

이름을 지정해주고 HTML 소스 텍스트창에 아까 복사한 쿠팡 배너 url을 붙여넣기 한다. 확인을 누르고 사이드바에 최종 적용해주면 끝! 

 

 

쿠팡 파트너스 배너가 예쁘게 삽입되었다.

 

[추가TIP] 만약 쿠팡 파트너스 배너와 아래에 이어지는 모듈 사이의 여백을 조정하고 싶다면... 쿠팡 배너 url을 붙여넣기 할 때, 아래 소스를 추가하여 해결할 수 있을 것이다.

<div style="margin-bottom:40px;"></div> 

숫자가 클 수록 여백이 늘어난다.

반응형

댓글0