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

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

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


스크립트 코드
<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와 스크립트는 너무 어려운거 같아요. ㅠ.ㅠ



신고

댓글 34

  • BlogIcon CANTATA (2011.01.05 12:12 신고)

    리얼클릭이니깐 가능한 플로팅 배너네요 ㅎㅎ
    애드센스 썼다가 ^ 비활성화 ㄱㄱ

  • BlogIcon 돌이아빠 (2011.01.05 13:50 신고)

    MastmanBAN님 감사합니다^^
    적용해 보도록 하겠습니다^^

  • BlogIcon 닉쑤 (2011.01.05 14:33 신고)

    오옷.. 깔끔하게 떠 다니네요 ㅎ

    너무 크게 튀지도 않고 괜찮은거 같습니다. 솔깃솔깃 ㅋ

  • BlogIcon 재아 (2011.01.05 15:17 신고)

    적당한 위치에 있기도 한데,. 걸리적 거리기도 한듯 하고~~ 뭐 아무튼 나빠 보이진 않습니다..

    • BlogIcon MastmanBAN (2011.01.06 19:18 신고)

      여러곳에 배치해 봤는데 저곳이 가장 적당한거 같아서리... ^^

  • BlogIcon 오자서 (2011.01.05 16:20 신고)

    ㅎㅎ 감사합니다.
    쇼핑몰에 사용하면 아주 좋겠군요~~

  • BlogIcon 함차가족 (2011.01.06 10:11 신고)

    우와 훌륭하세요. 적용하는건 가능할것 같은데...광고게재에 적신호가 올까봐..다소 두려워요

    • BlogIcon 함차가족 (2011.01.06 14:33 신고)

      적용해봤는데..이상하게도 사이드상단에 고정되네요 ㅠ..ㅠ

    • BlogIcon MastmanBAN (2011.01.06 19:19 신고)

      음... 이상하네요. 왠만하면 다 되야 하는데...
      뭔가 특성을 타는 모양인데... 제가 코드를 보지 않고서는 어떻게 하라고 말씀을 못 드리겠네요. ㅜ.ㅜ

  • BlogIcon 컴투스 (2011.01.06 10:12 신고)

    네이버 블로그에서도 먹혔으면 좋겠어요 ㅠㅠ

    • BlogIcon MastmanBAN (2011.01.06 19:19 신고)

      코드 수정만 가능하면 아마 될거라 생각이 되는데요.

  • BlogIcon 아하라한 (2011.01.06 10:37 신고)

    감사합니다. 저두 한번 시도해 봐야 겠습니다.

  • BlogIcon 맥컬리™ (2011.01.06 15:20 신고)

    이 방법 궁금했었는데, 이렇게 지대로 알게 되었심더.
    유용한 포스팅입니다.. ^^;

  • BlogIcon 재아 (2011.01.06 16:50 신고)

    나중에 이벤트 할때 이용 해먹어야겠습니다.

    • BlogIcon MastmanBAN (2011.01.06 19:20 신고)

      그러셔도 되겠네요. 설문조사 같은거 하실때 이용하셔도 될거 같네요. ㅋ

  • BlogIcon 벼룩이 (2011.01.06 20:36 신고)

    감사합니다. -0-
    전 안되면 될때까지 하는 성격이라 밤새 찾고찾아 해결했습니다.
    그런데 이게 더 좋은것같군요 ㅎㅎㅎ

    잘보았습니다. ㅎㅎ

  • BlogIcon 해커 C (2011.01.09 11:47 신고)

    멋진팁 잘보고 갑니다 ~ 나중에 적용해봐야 겠습니다 ㅎ

  • BlogIcon 토마스↗ (2011.01.22 14:03 신고)

    MastmanBAN님 처럼 본문에 붙박이 하는 방법은 어떻게 해야하나요^^:

    • BlogIcon MastmanBAN (2011.01.27 00:11 신고)

      드림작가님 블로그에 이미 사용하고 계신 관계로 따로 알려 드리진 않겠습니다. ㅋ

  • BlogIcon YJT (2011.06.13 07:15 신고)

    이렇게 좋은 정보를 공유해주셔서 고맙습니다.
    그런데 질문이 좀 있습니다.
    저도 마스트만반님의 소스를 이용해서 적용을 해보았는데요.
    다음 뷰를 연동시키려다보니 본문 내에 플로팅 메뉴를 위치 할 수밖에 없었는데요.
    그러다보니 플로팅 메뉴도 윈도우 창이 아닌 본문의 복에 맞추어 그 안에서 노네요..

    이부분을 수정할 수 없나요? 윈도우 창에 맞게 움질일 수 있도록요...
    (윈도우 창 왼쪽에 바짝 붙일려고 하는데, 본문 폭내에서 왼쪽에 바짝 붙어서 나오네요..)
    혹시 방법을 아신다면 좀 알려주시면 감사하겠습니다.

    그럼 좋은 하루 보내세요.

  • BlogIcon 공기가방 (2011.10.21 04:25 신고)

    도움이 아주 많이 되었습니다 감사합니다 ^^

  • BlogIcon 잉여토기 (2011.11.12 21:47 신고)

    감사합니다.
    덕분에 리얼센스 플로팅 예쁘게 달았습니다.

    css 맨 윗줄만
    .fixed-bottom
    {position:fixed;bottom:5px; top:auto;margin-left: -숫자px; }
    으로 바꿨는데
    괜찮겠죠?

    아니면 바꿀 때도
    margin-bottom: 0 auto;z-index:900;
    이거 꼭 같이 달아줘야 하나요?

  • BlogIcon 선우화 (2012.03.09 20:46 신고)

    안녕하세요.제가 티스토리 블로그 정착한지 얼마 안됬는데요.
    제가 다음뷰온(추천버튼)을 만들었는데,
    추천횟수가 뜨질 안네요.어떻게된거죠?
    article id도 완벽하게 바꾸궛는데 뭔문제인거죠?
    정말 하라는대로 블로그 주소만 바꿧는데 정상화되질 안네요.
    고객센터에 전화했는데 티스토리,다음뷰는 문제가 없다는데 어떤문제인건가요?ㄷㄷ;;

    • BlogIcon MastmanBAN (2012.03.12 13:37 신고)

      음... 제가 소스를 보지 못해 어디가 잘못 되었다 말씀 드리긴 힘들지만 아마 코드에 약간의 실수가 있지 않나 싶습니다.

  • 안녕하세요 (2013.12.16 16:33 신고)

    css는 자신이 별로도 추가해야하나요?

티스토리 툴바