쿠팡 파트너스 다이나믹배너 아래에 검색창을 넣기

티스토리 사이드바에 쿠팡 파트너스 다이나믹 배너 넣기

쿠팡파트너스를 이용하시는 분들이라면 상품 사용기와 함께 쿠팡 링크를 거는 것으로 주로 수익을 만들고 계실겁니다. 하지만, 가끔은 배너를 이용해서 들어오는 고객들도 있다고 합니다. 아주 미미하겠지만, 없는 것보다는 1%라도 가능성을 높이는 전략. 아주 미세한 파이프라인 구축을 해 보는 방법입니다.

 

아래 포스팅에서 티스토리 사이드바에 다이나믹 배너 넣는 방법을 포스팅했습니다. 일단 다이나믹 배너를 생성하여 사이드바에 넣는 것까지는 아래 글을 참조하여 따라오시기 바랍니다. 조금이라도 티스토리를 통한 수익 발생 (수입 발생)을 유발 할 수 있는 팁을 연구해 보겠습니다.

 

티스토리 쿠팡 파트너스 다이나믹 배너 사이드바에 넣기

티스토리 쿠팡 파트너스 다이나믹 배너 사이드바에 넣기

 

쿠팡 파트너스 검색 위젯 주소 생성

쿠팡파트너스 홈페이지로 들어가셔서 메뉴를 보시면 검색 위젯 옵션이 있습니다.

검색 위젯

해당 메뉴를 눌고 들어가면, 총 4가지 타입의 쿠팡 검색창을 설정할 수 있는 화면으로 연결됩니다.

 

첫번째는 쿠팡 로고 아래에 검색창이 있는 타입입니다.

좌측부터 로고02, 파비콘01, 파비콘02

 

제가 설명하려는 다이내믹 배너 바로 아래 붙이기에는 파비콘 타입이 더 낫다고 생각이들었습니다. 왜냐하면 쿠팡 다이나믹 배너가 나오는 사이즈에 따라서 쿠팡 로고가 배너 아래쪽으로 위치하는 경우가 있기 때문입니다. 그런 레이아웃 상태가 되면 로고타입은 쿠팡 로고 2개가 붙어 나오기 때문에 디자인적으로 좋지 않아 보입니다.

 

HTML을 잘 보면, 단축 주소의 맨 뒤에 알파벳만 바뀌더군요. 아무튼, 원하는 검색 위젯의 모양을 선택한 후 HTML 복사를 눌러서 코드를 복사합니다.

 

티스토리 배너에 적용하기

티스토리 배너 적용을 하기 위하여 다시 티스토리로 이동합니다. 다이나믹 배너 사이드바를 설정했던 관리자 페이지로 들어갑니다. 

꾸미기 → 사이드바로 들어간 후, 기존에 만들어진 쿠팡 배너 플러그인으로 가서 편집을 누릅니다.

복사한 코드를 아래와 같이 쿠팡 배너 HTML 소스코드 아래에 붙여 넣습니다.

쿠팡 배너 소스

네모로 하이라이트 한 부분입니다.

일단 검색 위젯을 넣는 것은 완료했습니다.

 

쿠팡 파트너스 배너 폭 조정

저는 개인적으로 배너가 너무 꽉차 있는 모습을 좋아하지는 않습니다. 배너 설치하는 글에서 설명드렸듯이 저는 해당 폭을 95% 정도로만 조정했습니다. 그리고 그 아래에 검색창이 배너보다 더 크면 안 되기 때문에 폭을 더 줄였습니다. 저렇게 설정을 했을 때는 제 블로그의 사이드바에 나오는 모습과 같이 나오게 됩니다.

쿠팡 파트너스 배너 모습

쿠팡파트너스와 검색 위젯이 마치 원래 하나인 것처럼 배치가 되었습니다. 여기서 width 숫자를 맞춰주면 아래 검색창의 끝단이 배너와 똑같이 맞게 바뀝니다. 

width 맞춘 모습

어느 쪽을 선택하던지 해당 숫자 %만 조정하면 모양을 바꿀 수 있습니다.

 

쿠팡 파트너스 배너 가운데 정렬

100%로 하시는 분들은 문제가 안 되는데, 그렇지 않고 저처럼 숫자를 줄이면, 배너가 한쪽으로 쏠려서 나오게 됩니다. 이때 배너를 가운데 정렬하는 것이 좋습니다. 

이 방법은 너무나 쉽습니다. 

배너의 HTML 편집에서 모든 코드가 시작하는 앞부분에 " <div align=center> " 이것을 한 줄 추가해 주시고, 배너 HTML의 맨 마지막에 해당 구획을 닫는다는 의미로 " </div> "로 닫아주시면 됩니다.

그럼 배너가 가운데에 이쁘게 정렬됩니다.

 

티스토리 팁

이렇게 해서 쿠팡 파트너스 다이나믹 배너 사이드바 설정을 마칠 수 있습니다. 이것을 응용하면 사이드바가 아닌 본문 상단이나 하단에도 배너를 넣을 수 있습니다.