본문가리지 않는 고정형 플로팅배너 소스

플로팅 배너를 삭제했다가 다시 달면서 대충 검색해서 나온 기능적으로 좋아보이는 최신(?) 소스를 이용하여 플로팅배너를 게재했었는데 그 소스는 화면해상도가 가로 1000px 이하로 줄어들면 본문영역을 약 200px까지 가리고 큰 해상도에서는 어정쩡하게 플로팅되기도 하고 블로그 제재사유에 해당하는 티스토리 약관위반이라 플로팅 배너소스를 교체했습니다

원래 소스는 다음뷰,좋아요 버튼등을 다는 용도로 공개하신 햇반님 블로그의 글을 참조했습니다 플로팅 배너를 만드는 소스중 아마 가장 짧은 소스에 속하지 않을까 할정도로 심플한 소스라 참조할것도 없이 테이블만드는 부분과 플로팅 부분만 남기고 삭제해서 사용중입니다

햇반님 블로그 블로그에 추천,움직이는 구독 버튼 달기-http://clason.tistory.com/392

우선 제가 수정해서 현재 사용중인 소스를 보겠습니다

*제블로그는 플로팅배너 위치가 본문 왼쪽입니다 

<!-- 본문가리지 않는 플로팅배너 모듈 --> <A style="POSITION: fixed; MARGIN-LEFT: -600px; TOP: 175px; LEFT: 50%;"> <table style="border:0px width:120px;"> <tr><td> 게재할 광고 스크립트 여기에 넣으세요 </td></tr></table> </A> <!-- 모듈 끝 --> </body>

본문가리지않는플로팅배너소스.txt

위에 설명한대로 소스가 짧아서 구분하기 쉽죠? 핵심코드는 맨 위 딱 한라인입니다 소스 넣을 위치는 제경우엔 Skin.htm 에서 </body> 바로앞에 넣어서 블로그의 핵심인 글본문이 먼저 뜰수 있게 했습니다 아참 </body>는 복사하지 않아도 됩니다^^ 

브라우저 호환성 테스트를 해보니 익스플로러6 버전에서만 위치가 깨집니다 그외엔 잘 동작하고요  

위 소스의 -600px의 600을 다르게 하면 배너의 좌우 위치를 조정하고 TOP:175px는 배너의 상하위치를 조정합니다 만약 본문 오른쪽에 플로팅 하고싶다면 "LEFT" 두개를 Right로 변경하시면 됩니다

아래 스크린샷 이미지들은 이 플로팅배너 소스가 화면해상도 변경에도 본문을 침범하지 않는것을 확인하면서 찍어둔것입니다

- 본문 왼쪽에 얌전히 있는 플로팅 배너입니다

- 좌우폭을 약 1000px이 안되게 좁힌 상태입니다 플로팅배너는 거의 보이진 않을정도로 보이지 않습니다 본문영역은 침범하지 않습니다  

- 가로 800도 안되게 좁힌상태입니다 플로팅 배너 자체가 사라졌습니다 스크롤해서 찾아봐도 보이지 않습니다^^ 유용하게 사용하세요~