기본적으로 다운로드하신 소스 코드를, 코드 위젯에 붙여 넣으면 플로우팅 배너가 작동합니다. 그러나 우리는 사이트에 삽입하기 앞서 몇 가지 바꿔야 할 항목이 있습니다.
1) 빨간색 : 배너의 위치를 정할 수 있습니다. left는 좌측면, top은 상단으로부터의 거리를 가리킵니다. 2) 보라색 : 배너를 클릭하면 이동하는 주소(URL)를 입력해주세요. 3) 파란색 : 배너 이미지의 주소(URL)입니다. 게시판을 이미지 저장소로 쓰는 방법은 이 링크를 참조해보세요. 4) 녹색 : 배너의 크기입니다. 원본보다 작은 가로/세로 25% 크기로 설정되어 있습니다.
위 빨강/보라/파랑/녹색 텍스트는 마음에 드는 모양이 나올 때까지 얼마든지 수정 가능합니다.
<style> /* 플러스친구 배너 위치 */ .fltBanner1 { position: fixed; left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */ top: 260px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */ display: block; z-index: 999; } /* 전화걸기 배너 위치 */ .fltBanner2 { position: fixed; left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */ top: 400px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */ display: block; z-index: 999; } </style>
시작에 앞서
플로우팅 배너를 추가하려면 HTML과 CSS 코드가 필요합니다. 이 강좌에서는 플로팅 배너 제작을 위한 소스 코드와 일부 편집 방법을 소개합니다. :)
*코드 편집 후 디자인 모드에서 적용하는 방법은 이 링크를 확인해보세요.
1단계, 소스 코드 다운로드
먼저 소스 코드를 다운로드 받으세요.
다운로드하기 >
2단계, 코드 열기
소스 코드 파일은 TXT 파일로 제작 되었으며, 메모장으로 열 수 있습니다.
3단계, 코드 편집하기
기본적으로 다운로드하신 소스 코드를, 코드 위젯에 붙여 넣으면 플로우팅 배너가 작동합니다. 그러나 우리는 사이트에 삽입하기 앞서 몇 가지 바꿔야 할 항목이 있습니다.
1) 빨간색 : 배너의 위치를 정할 수 있습니다. left는 좌측면, top은 상단으로부터의 거리를 가리킵니다.
2) 보라색 : 배너를 클릭하면 이동하는 주소(URL)를 입력해주세요.
3) 파란색 : 배너 이미지의 주소(URL)입니다. 게시판을 이미지 저장소로 쓰는 방법은 이 링크를 참조해보세요.
4) 녹색 : 배너의 크기입니다. 원본보다 작은 가로/세로 25% 크기로 설정되어 있습니다.
위 빨강/보라/파랑/녹색 텍스트는 마음에 드는 모양이 나올 때까지 얼마든지 수정 가능합니다.
<style>
/* 플러스친구 배너 위치 */
.fltBanner1 {
position: fixed;
left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
top: 260px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
display: block;
z-index: 999;
}
/* 전화걸기 배너 위치 */
.fltBanner2 {
position: fixed;
left: 20px; /* 좌측면으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
top: 400px; /* 상단으로부터 거리(px)입니다. 퍼센트(%)로도 입력하실 수 있습니다. */
display: block;
z-index: 999;
}
</style>
<!-- 플러스친구 -->
<a href="http://pf.kakao.com/_xnVlxfxl" class="fltBanner1" target="_blank">
<img src="https://cdn.imweb.me/upload/S20170530592cf901c1430/5a5d4a959dc39.png" width="25%" height="25%">
</a>
<!-- 전화연락 -->
<a href="tel:02-123-1234" class="fltBanner2" target="_blank">
<img src="https://cdn.imweb.me/upload/S20170530592cf901c1430/5a5d4a9583340.png" width="25%" height="25%">
</a>