<아무의 외부기억창고>에서도 이용하고 있는 스크립트 이다. 한마디로 "오~ 이거 유용하다!"
접기
자바스크립트,플로팅 배너, 따라다니는 광고, 소스, 다운로드, Javascript, floating banner, source, download
이번 내용은 좌우측 빈공간에 광고를 삽입하는 소스입니다. 페이지 스크롤이 되면 따라다니는 일명 플로팅 배너(Floating Banner)입니다.
저도 여러 블로그에서 소개된 내용을 달아보고 괜찮은 소스를 수정하여 사용하고 있습니다.
미리 말씀드리지만 필자의 블로그는 중앙정렬이 아니고 위치를
고정위치 로 수정을 하였습니다. 다른 블로그의 경우 수정을 하지않으셨다면 중앙정렬일 것입니다.
브라우저 사이즈가 줄어도 좌측광고와 본문의 내용이 겹치는 일이 없도록 광고와 본문의 겹치치않도록 되어있습니다. 본인의 블로그 기준으로 설명하오니 주의하시기 바랍니다.
아래는 참고용으로 이미 소개된 포스팅 내용의 링크입니다.
작업할 내용은 Div 태그부분과 CSS 두부분입니다.
1. Div 태그 아래 내용을 복사하여 [스킨]->[HTML/CSS]의
Skin.html 에서 아래부분을 찾아 바로 다음에 붙여넣습니다.
실제로는 공백이 없습니다.
설명 첨부된 화일의 내용을 보시면 아래와 같습니다. 여기서 굵게 표시된 부분에 원하시는 광고 코드를 삽입합니다.
< !-- 따라다니는 광고 레이어-->
<div class="fixed-bottom-left">
<!-- 좌측광고 삽입 --> < /div>
< div class="fixed-bottom-right">
<!-- 우측광고 삽입 --> < /div>
< !-- 따라다니는 광고 레이어 끝 -->
2. CSS 부분 [스킨]->[HTML/CSS]의 style.css 에서 마지막 부분에 아래 첨부된 내용을 붙여넣습니다.
설명 첨부된 파일의 상위 4줄만 수정하시면 됩니다. top부분을 105px 지점(top:105px;)부터 시작하도록하고 우측 광고의 경우 브라우저의 가로 90%지점(left:90%)에서 시작하도록 설정하였습니다. 자신의 블로그에 맞게 px 또는 %로 수정하세요. top:105px ; margin-bottom:0 auto;z-index:900;} top:105px ; left:90% ; margin-bottom:0 auto;z-index:900;}
유용하게 사용하세요.
접기 
Floating_banner_css.txt
Floating_banner_tag.txt