티스토리에 쿠팡파트너스 배너 달기 5분이면 충분!

티스토리에 쿠팡파트너스 배너 달기 5분이면 충분!

미루고 미루던 티스토리에 쿠팡파트너스 배너 달기 드디어 했습니다!

사실 그리 오랜 시간이 걸리지 않는데 "해야지, 해야지" 생각만 하고 귀찮아서 몇 달째 미루고 있었거든요.

주말을 맞이하여 오늘 드디어 쿠팡파트너스 배너를 달았습니다.

우선 쿠팡파트너스 배너를 달기 위해서는 쿠팡파트너스 회원가입을 해야 합니다.

저는 작년에 가입을 해놔서 배너를 다는데 시간이 조금 단축됐어요.

쿠팡파트너스 주소는 아래에 적어놨어요.

사진을 눌러도 바로 갈 수 있습니다.

https://partners.coupang.com

[출처 : 쿠팡파트너스 홈페이지]

혹시 아직 가입 전이시라면 가입 시 추천인 아이디에 < AF4977060 > 부탁드립니다^^

[출처 : 쿠팡파트너스 홈페이지]

이제 순서를 적어보겠습니다.

1. 로그인 후 [링크 생성]을 눌러 다이나믹 배너를 클릭합니다.

그리고 배너 생성을 누릅니다.

[출처 : 쿠팡파트너스 홈페이지]

2. 배너 만들기 화면에서 왼쪽 배너 설정에 있는 항목들을 차례로 선택 및 입력합니다.

크기 조정(왼쪽 빨간색 네모) 칸에 너비와 높이를 입력하면 오른쪽에 미리보기가 보입니다.

미리보기 확인 후 완성이 되면 [배너만들기]를 클릭합니다.

[출처 : 쿠팡파트너스 홈페이지]

배너만들기를 클릭하면 위 사진과 같이 파트너스 코드가 생성됩니다.

[복사] 버튼을 클릭하면 쿠팡파트너스 홈페이지에서의 작업은 끝이 납니다.

[출처 : 티스토리 블로그 페이지]

너비와 높이 사이즈를 어떻게 해야 하는지 잘 몰라서 이것저것 만져보다가 발견한 방법을 알려드리겠습니다.

(참고로 저는 HTML 잘 모르는 사람입니다..)

티스토리 메인 화면에서 오른쪽 마우스를 클릭하면 창이 하나 뜹니다.

거기에서 [검사]를 클릭합니다.

★ 오른쪽 마우스 클릭 시 주의할 사항은 블로그 메인 화면을 벗어나는 범위(빨간색 X 부분)가 아닌 블로그 범위(초록색 V 부분)를 클릭하는 것입니다. 

[출처 : 티스토리 홈페이지]

제대로 클릭을 했다면 위 화면과 같은 창이 뜹니다.

저도 잘 몰라서 마우스로 오른쪽 화면에 보이는 줄들을 왔다 갔다 하니 그 줄에 맞는 블로그 영역들이 표시가 되더라고요.

마우스 클릭 없이 그냥 위아래로 올렸다 내렸다 하면 왼쪽 화면에 그 줄에 맞는 영역 표시가 됩니다.

오른쪽 화면처럼요.

그리고 설정된 범위 사이즈가 나와요.

제 블로그의 사이드바 사이즈는 가로 230이더라고요.

그래서 너비는 230으로 지정하고 높이는 제 생각에 적당하다 싶은 숫자로 입력을 했어요.

[출처 : 티스토리 홈페이지]

3. 이제 티스토리에서의 작업을 시작합니다.

로그인 후 관리 화면에서 [플러그인]을 클릭합니다.

[출처 : 티스토리 홈페이지]

플러그인 화면에서 [배너 출력]을 찾아 클릭합니다.

[출처 : 티스토리 홈페이지]

위 사진과 같은 팝업이 뜨면 [적용]을 누릅니다.

[출처 : 티스토리 홈페이지]

적용을 누른 후 배너출력을 다시 보면 사용중으로 변경된 것이 보일 거예요.

[출처 : 티스토리 홈페이지]

4. 관리 화면에서 [사이드바]를 클릭한 후 오른쪽 화면에서 HTML 배너출력 옆 +를 클릭합니다.

클릭을 하면 사이드바 3개 중 어디에 넣을지 선택을 하라고 나오는데 본인이 넣고 싶은 위치를 선택하면 됩니다.

어차피 수정이 가능하니 심각하게 고민은 안 하셔도 될 것 같아요.

(참고로 수정이 가능하게 하려면 아래 나오는 [사용자 모듈에 저장]에 체크를 해야 합니다)

[출처 : 티스토리 홈페이지]

사이드바 중 하나를 선택하면 오른쪽 맨 끝 쪽에 HTML 배너 출력이 생성됩니다.

마우스를 갖다 대면 [편집] 글씨가 보이는데 이때 편집 글씨를 클릭합니다.

[출처 : 티스토리 홈페이지]

팝업이 뜨면 이름을 입력하고, 쿠팡파트너스에서 복사한 것을 HTML 소스에 붙여넣기 합니다.

(이름은 제가 알아보기 쉬운 문구로 하면 되고, 붙여넣기는 키보드 ctrl+v입니다)

팝업에 [사용자 모듈에 저장]이 있는데 체크를 하지 않으면 사용자 모듈 저장이 안돼서 사이드바 변경이 안돼요.

예를 들어 사이드바 3에서 2로 변경을 하고 싶으면 다시 쿠팡파트너스에 가서 소스 복사를 해야 합니다.

그래서 저는 사용자 모듈에 저장을 체크했어요.

팝업창 입력이 끝나면 확인을 누릅니다.

[출처 : 티스토리 홈페이지]

확인을 누른 후 화면입니다.

사용자 모듈에 제가 입력한 이름인 '쿠팡다이나믹배너'가 있고, 사이드바 1에 플러그인이 정상적으로 설정된 게 보입니다.

참고로 저는 처음에 3에 넣었다가 다시 1로 바꿨어요.

블로그 화면 상단에 보이는 게 더 낫더라고요. 

[출처 : 티스토리 홈페이지]

그리고 저는 추가로 검색 위젯도 넣어줬습니다.

설정하는 방법은 다이나믹배너 달기와 같아요.

[출처 : 티스토리 블로그 페이지]

정상적으로 배너 설정이 완료되면 위 화면과 같이 오른쪽에 배너가 표시가 됩니다.

하나하나 캡처를 해서 저는 사실 5분보다는 더 많은 시간이 걸렸지만 아마 이걸 보고 하시는 분들은 정말 5분 정도면 배너 달기 가능하지 않을까 싶습니다.

그럼 이상으로 티스토리에 쿠팡파트너스 배너 달기를 마치겠습니다!