따라 다니는 플로팅 배너 사용 방법

제 블로그 오른쪽 사이드바에 보시면 따라 다니는 플로팅 배너가 있는데 어떻게 사용하는지에 대해서 알려 드리도록 하겠습니다.

제가 사용한 방법이 완벽한 방법은 아닙니다. 저도 코드를 만들면서 모든 브라우저에서 완변히 사용되도록 할려고 노력해 봤는데 제 기술이 모자라서 그런지 제가 원하는대로 잘 되지 않더군요. 그래도 어느 정도는 크로스 브라우징이 되니 사용하는데는 크게 지장이 없을거 같습니다.

스크립트 코드

<script>

function floating_close(divid) {

//플로팅 광고 닫기

var strObj = document.getElementById(divid);

 strObj.style.display = "none";

}

</script>

위 스크립트 코드를 </head> 위에 복사해서 붙여넣기 하시기 바랍니다. 이 스크립트 코드를 이 위치가 아닌 배너 코드 위에 넣어도 되긴 한데 그렇게 하니 파이어폭스에서 [닫기] 기능이 되질 않더군요. 그러니 왠만하면 </head> 위에 넣으시기 바랍니다.

HTML 코드

<!--

<div class="fixed-bottom" >

<div id="flotting_layer" >

<table cellpadding="0" cellspacing="4" border="0" bgcolor="#000000">

<tr>

<td bgcolor="#FFFFFF" onClick="floating_close('flotting_layer')">

(해당 배너 코드)

</td>

</tr>

<tr>

<td align="center">

<a href="javascript:floating_close('flotting_layer');" 

                                    style="color:#FFFFFF; text-decoration:none; font-size:12px;">

[닫기]

</a></td></tr></table></div></div> -->

저 같은 경우는 사이드바에 따라 다니는 플로팅 배너를 넣는게 목적이였기 때문에 위 코드를 사이드바가 위치한 [sideinfo] 코드 아래 부분에 넣었습니다. 다른 곳에 위치하고 싶으신 분들은 코드를 적당한 곳에 넣으시기 바랍니다. 그리고 다 아시겠지만 코드 부분에 <!--, --> 는 빼고 넣으시기 바랍니다. 

CSS 코드

.fixed-bottom    /* position fixed bottom */

{position:fixed;bottom:5px; top:auto;margin-bottom: 0 auto;z-index:900;}

@media screen and (-webkit-min-device-pixel-ratio:0)

{ .fixed-bottom    /* 크롬 position fixed bottom */

{position:fixed;bottom:55px; top:auto;margin-bottom: 0 auto;}

}

* html .fixed-bottom /* IE6 position fixed Bottom */

{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop-5+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

마지막으로 위 CSS 코드를 style.css 제일 아래 부분에 넣어 주시면 됩니다. 이렇게 하시면 코드는 모두 끝이 납니다. 살짝 복잡한 감도 없잖아 있지만 한방에 할수 있는 방법으로는 좀 어렵겠더군요. 

[추가내용]

간혹 플로팅 배너가 다른 위젯 아래로 내려 간다면 기존에 코드를 가져 가셨던 분들은 CSS 코드 부분에 빨간 글씨로 된 부분만 추가 하시면 되고 처음 적용하시는 분들은 모두 복사해서 넣으시면 됩니다. 그런데 IE6에서 다시 확인해 보니 select 박스 아래로 플로팅 배너가 아래로 내려 가더군요.

이걸 어떻게 수정해 볼려고 했는데 인터넷에 검색을 해보니 IE6 버그라서 안된다고 하네요. select 박스가 무조건 최상위로 표현 된다고 합니다. 편법으로 아이프레임을 쓰면 된다고 하는데 제가 아이프레임 쓰는걸 싫어 해서 그냥 놔둘려고 합니다. IE6은 왜이리 사람 애를 먹이는지... ㅜ.ㅜ 

그리고 제가 이 코드를 좀더 테스트 하고 공개 할려고 했는데 물어 보시는 분들이 계셔서 공개를 하긴 합니다만 서두에서도 말씀 드렸듯이 완벽한 코드는 아닙니다. 약간의 문제가 있긴 한데 위 코드를 적용 하신후 레뷰 사이트에 들어가 보시면 크롬, 사파리, IE6을 제외한 브라우저에서는 닫기 버튼이 가려지는 것을 보실수 있을 것입니다. 

레뷰에서 상단 추천바가 추가된 만큼 아래 bottom 부분이 위로 올라와야 하는데 그게 안되네요. 다음뷰나 다른 상단 추천바가 있는 사이트들은 괜찮은데 제가 확인 해본바로는 레뷰만 안되는거 같습니다.

크롬과 사파리는 사이트별 상단 추천바에 따른 bottom 명령어가 아예 먹히지 않아서 레뷰에 맞춰서 @media~ 로 시작하는 CSS 핵 부분을 추가 하면서 55px 만큰 아예 고정으로 해놔서 모든 사이트에서 55px 만큼 떨어져서 보일 것이고 IE6도 bottom 명령이 안먹혀서 *html~ 시작하는 전용 CSS로 해놓으면서 본문 높이에 따라 계산을 해서 bottom 을 지정하기 때문에 문제가 없는걸로 보입니다.

IE6 CSS를 좀 응용해서 모든 사이트에 맞게끔 해볼려고 했는데 그게 안되더군요. 이런 이유로 모든 브라우저에 사용할수 있는 크로스 브라우징이 되지 않는 미완성이라 좀더 연구해 보고 포스팅을 할려고 했는데 쉽게 찾아 지질 않을거 같고 이 코드를 요구하시는 분들도 계셔서 포스팅을 합니다. 저보다 실력이 좋으신 분들이 계시면 크로스 브라우징이 되는 방법을 아시면 좀 알려 주세요. ㅜ.ㅜ

제가 개발자지만 웹을 개발하면서도 그렇고 블로그 코드를 추가, 수정 하면서도 그렇고 제가 전문 웹개발자가 아니라서 그런지 웹표준과 크로스 브라우징이 되게 하기 위한 CSS와 스크립트는 너무 어려운거 같아요. ㅠ.ㅠ

관련 글타래

• 본문을 덮지 않고 따라 다니는 사이드 배너 사용 방법
• 다음뷰 추천과 트위터와 페이스북 공유하기 작은 버튼 사용 방법
• 따라 다니는 배너 지정한 위치에서 부터 스크롤 되게 하는 방법