카페24 ) 네이버톡톡 플러스친구 간단 링크 배너 넣는 방법

 

 

 

이번 포스팅에서는 카페24 쇼핑몰에 네이버톡톡과 카카오톡채널(구 플러스친구) 배너 넣는 방법을 알아보겠습니다.

소스코드는 스크립트가 아닌 html/css 를 통해 작성할 예정입니다.

먼저 네이버톡톡과 카카오톡채널 각각의 관리자페이지에서 상담 링크를 구해보겠습니다.

 

 

 

 

 

 

 

#1 네이버톡톡 상담 링크 구하기

 1  네이버톡톡 파트너센터 페이지https://partner.talk.naver.com에 접속해 시작하기 버튼을 클릭합니다.

 

 

 

 

 2  내 계정 하단에서 채팅 URL을 복사할 수 있습니다.

 

 

 

 

 

 

 

 

#2 카카오톡채널 상담 링크 구하기

 1  카카오톡채널 관리자센터 페이지https://center-pf.kakao.com/에 접속합니다.

 

 

 

 

 2  홍보하기 메뉴 > 1. 채널 홍보하기 중 링크 복사하기에서 복사하고 싶은 URL을 복사합니다.

저는 배너 클릭시 바로 채팅으로 연결되도록 채팅 URL을 복사하겠습니다.

 

 

 

 

 

 

 

 

#3 카페24 PC 쇼핑몰에 넣기

이제 준비한 배너 이미지를 FTP에 업로드합니다.

저는 PC와 모바일 각각에 들어갈 이미지를 아래와 같이 준비하였습니다. 모바일은 실제 보이는 이미지 사이즈보다 2배 이상되는 이미지를 등록해주어야 선명하게 보이는 점을 고려하여 배너를 제작해야 합니다.

 

 

 

 

FTP에 이미지 업로드하는 방법은 이전 포스팅을 참고해주시기 바랍니다.

카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 1

카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 2

 

 

 

업로드한 배너 이미지를 아래 이미지의 박스 표시쯤 위치하도록, 스크롤을 하여도 항상 그 자리에 고정되는 배너로 세팅해보겠습니다.

카페24 기본 스마트 디자인 스킨에서 수정을 진행하였습니다.

 

 

 

 

어차피 fixed 되는 아이콘이라 어디에 넣어도 무관하지만 하단 부분에 고정되어 위치될테니 저는 footer 내에 html을 넣을 예정입니다.

적당한 클래스를 넣어준 다음 a 태그의 href 속성에는 앞서 구했던 네이버톡톡과 카카오톡채널 상담 링크를 넣어주고, img 태그의 src 속성에는 업로드한 이미지의 경로와 파일명을 작성해주면 됩니다.

현재의 창이 아닌 새창에서 열리도록 a 태그의 target 속성은 _blank 로 작성해주었습니다.

<div class="f_fixed">
	<p><a href="네이버톡톡 상담 링크" target="_blank"><img src="이미지경로/파일명"></a></p>
	<p><a href="카카오톡채널 상담 링크" target="_blank"><img src="이미지경로/파일명"></a></p>
</div>

 

 

 

실제 작성된 html은 아래와 같습니다.

 

 

 

 

이제 원하는 곳에 위치시킬 수 있도록 css 를 작성해줍니다.

.xans-layout-footer .f_fixed { position:fixed; bottom:45px; left:50%; margin-left:640px; }

 

 

 

PC 쇼핑몰에 접속해보면 아래와 같이 적용된 것을 확인할 수 있습니다.

position:fixed를 사용하였기 때문에 스크롤을 내려도 항상 저 자리에 고정되어 있습니다.

 

 

 

 

 

 

 

 

#4 카페24 모바일 쇼핑몰에 넣기

모바일도 동일하게 적용할 수 있습니다.

html은 pc와 동일하게 작성(파일명만 모바일용으로 변경), css는 아래와 같이 작성하였습니다.

.xans-layout-footerpackage .f_fixed { position:fixed; right:10px; bottom:10px; z-index:10; }
.xans-layout-footerpackage .f_fixed > p { width:36px; height:auto; }
.xans-layout-footerpackage .f_fixed > p img { width:100%; }

 

 

 

모바일 쇼핑몰에 아래와 같이 적용되었습니다.

 

 

 

 

이번 포스팅에서는 카페24 쇼핑몰에 네이버톡톡 상담 배너와 카카오톡채널 상담 배너 넣는 방법을 알아보았습니다.