본문을 덮지 않고 따라 다니는 사이드 배너 사용 방법

지금 리얼센스를 광고를 테스트 하고 있는데 다른 블로거 분들에 비해 그렇게 크게 수익이 나지 않네요. 역시 저는 광고 수익하고는 슬프게도 크게 인연이 없나 봅니다. ㅠ.ㅠ

리얼센스 광고를 달고 테스트를 하면서 하나 느끼는게 역시 구글 애드센스 광고에서 크게 수익을 보지 못하면 리얼센스에서도 확 오른 금액을 받기는 힘들다는 것을 느끼네요. 저만의 경우일수도 있지만 말이죠.


어찌됐든 리얼센스를 달면서 어떻게 하면 수익이 좀더 날까 여러가기로 최적화를 테스트 하고 있는데 다른 분들의 의견에 따르면 사이드에 광고를 스크롤로 내리더라도 따라 다니게끔 하면 클릭율이 높다고 하더군요. 그래서 저도 그렇게 한번 해봤는데 제 본문 가로 사이즈가 커서 그런지 저에겐 그렇게 크게 도움이 되지 않아 지금 제 블로그에는 사용하고 있지 않습니다. 


하지만 다른 분들중에는 이렇게 따라 다니는 코드를 달면 어느정도 수익에 도움이 된다고 하는데 이 따라다니는 코드를 사용할려면 코드를 작성하는데 애를 먹습니다. 모니터 해상도에 따라 따라 다니는 배너가 본문을 덮어 버리는 경우가 생기기 때문이죠. 그리고 일반적인 코드로 어찌어찌 해서 해상도에 따라 덮지 않게 만들었다 하더라도 가장 문제가 되는게 인터넷 익스플로러6(IE6)에서는 이 일반적인 코드가 먹히지 않는 다는 것입니다.


IE6을 포기 할려고 해도 국내 사정상 아직까지 IE6을 사용하는 유저들이 많기 때문에 포기 하기가 많이 아깝습니다. 저도 IE6 사망 광고도 나오고 해서 사용율이 낮을줄 알았는데 제 블로그 방문객 최근 3개월간 브라우저 버전별 사용율을 보니 IE6을 무시하지 못하겠더군요. 


그래서 어떻게 하면 모든 버전에서 가능한 해상도에 따른 본문을 덮지 않고 따라 다니는 사이드 배너 코드를 만들까 하고 여러가지 코드 찾아봤는데 좀 어렵더군요. 간단하게 할수 있는 방법도 있을거 같은데 제 마음에 드는 코드를 찾기가 힘들더군요. 그래서 여기 저기 돌아 다니고 테스트 하고 짜집기를 해 보면서 간단하면서 제가 원하는 코드를 짜집기를 해서 만들어 봤습니다. 그래도 꼴에 개발자라고 방법을 찾긴 찾더군요. ㅋㅋㅋ

HTML 코드에 작성
<div class="fixed-top" >
배너코드 
</div>

CSS 코드에 작성
.fixed-top
{position:fixed;bottom:auto; top:50px;margin-left: -142px;}

* html .fixed-top   
{position:absolute;bottom:auto;
top:expression(eval(document.documentElement.scrollTop+50));}

HTML 코드에 작성 이라고 되어 있는 부분의 코드를 티스토리의 경우 HTML/CSS 편집에서 skin.html 부분에서 [샵샵_article_rep_desc_샵샵] 코드 윗 부분에 넣고 CSS는 style.css 코드 부분에 제일 마지막에 넣어 주시면 됩니다. 

저 같은 경우 본문 사이즈가 650이라 margin-left 가 -142면 왼쪽 본문 끝에 위치 하던데 다른 분들은 저랑 사이즈가 틀리니 수치를 바꿔 주시기 바랍니다. 그리고 갈색으로 되어 있는 50은 상단에서의 픽셀입니다. 사용자가 원하는 수치로 바꿔주시면 됩니다.

이렇게 이 코드를 이용하시면 모든 브라우저에서 사용 가능하고 모니터 해상도에 따른 본문을 덮어 버리는 경우가 없는 따라 다니는 사이드 배너를 사용 하실수 있을 것입니다. 그리고 코드도 몇줄 안되어서 이용하시는데 크게 어려움을 없으리라 생각 됩니다. 

따라 다니는 사이드 배너를 이용하고 싶은데 해상도에 따라 본문을 덮어 버리는 경우 때문에 따라 다니는 사이드 배너를 이용하지 못하셨던 분들이 계시다면 위 코드를 이용하여 따라 다니는 배너를 이용해 보시기 바랍니다. 그리고 그 배너로 인해 높은 수익을 올리시기 바랍니다. 그나저나 전 언제쯤 광고로 높은 수익을 올리게 될런지... ㅜ.ㅜ



신고

댓글 25

  • BlogIcon snowall (2010.12.22 16:00 신고)

    광고 하나가 그래프를 덮어버려서 못보겠네요... 닫히지도 않아요 -_-;
    Win7 64bit, FF4b7입니다.

    • BlogIcon MastmanBAN (2010.12.22 16:35 신고)

      크... 죄송합니다. 제가 크롬을 써서 크롬과 IE에서 되면 다 되는줄 알았는데 파폭에서는 닫기를 눌러도 안닫기네요.
      지금 방금 수정했습니다. 이제는 닫기 누르시면 사라 집니다. (--)(__)(--)

  • BlogIcon snowall (2010.12.22 16:43 신고)

    잘 되네요 :)
    글 잘 읽었습니다

  • BlogIcon 컴투스 (2010.12.23 11:55 신고)

    저도 크롬을 주로 써서 느끼는 거지만 익스플로러 참 무겁고 안먹히는 코드들도 많고 하죠^^;;
    아직 개인적으로 html 공부중이지만 MastmanBan님 덕에 더 많은걸 배웠습니다^^

    • BlogIcon MastmanBAN (2010.12.27 14:58 신고)

      IE6은 언제나 골치 덩어리네요. 다되는데 왜 이놈만 안돼는 것인지... ㅜ.ㅜ
      빨리 사장 되어야할 브라우져가 아닌가 싶습니다.

  • BlogIcon 벼룩이 (2011.01.04 01:00 신고)

    ㅎㅎ 저도 리얼클릭 떠다니는 광고 하고 싶은데, 닫기 버튼은 어떻게 달아야 하는지 모르겠네요 ㅠ.ㅠ
    배너코드라고만 되어있어서, 어떻게 하는지 모르겠습니다.
    자세한 설명좀 부탁드립니다...

    • BlogIcon MastmanBAN (2011.01.06 19:11 신고)

      따로 포스팅을 해 놨습니다. 아래 링크를 참조 하세요.

      http://mastmanban.tistory.com/522

  • BlogIcon 돌이아빠 (2011.01.04 13:08 신고)

    헛 이거 전 아예 안되네요 >.<
    한 위치에 그냥 고정되어 있다는 ㅡ.ㅡ FF에서 보는데 말이죠 ㅎㅎ
    포기 ㅠ.ㅠ

  • BlogIcon dachoigo (2011.02.01 23:04 신고)

    좋은 정보 정말 감사합니다.
    파폭에서 잘 되네요.
    여러 곳에서 비슷한 소스들을 설치해 봤는데 그 중에서
    제일 좋습니다.
    다시 한 번 감사합니다.

    • BlogIcon MastmanBAN (2011.02.10 16:01 신고)

      감사합니다. 나름 쉽게 쓰이게 하기 위해 노력 했습니다. ㅋㅋㅋ

  • BlogIcon 클라리 (2011.03.23 09:03 신고)

    감사합니다^^....
    다른건 복잡해가지고 애먹었는데...
    이렇게 간단히도 되는군요...
    잘쓰겠습니다^^

    • BlogIcon MastmanBAN (2014.09.01 17:29 신고)

      어렵게 해놓으면 저도 못알아 볼거 같아 최대한 쉽게 적으려고 노력했습니다. ^^

  • huny (2011.06.22 12:25 신고)

    좋은 정보 감사드려요^^ 그런데 일반 홈페이지에서는 어떻게 적용해야하나요~
    제가 사이드 배너 쓰는데 다른 운영체제로 보면 가운데로 딱 되어있어서 ㅠㅠ

    • BlogIcon MastmanBAN (2014.09.01 17:30 신고)

      일반 홈페이지는 저도 해볼질 않아서 잘 모르겠네요. 죄송합니다. ㅜ.ㅜ

  • BlogIcon 공감공유 (2011.06.25 12:37 신고)

    좋은 정보 잘 보고 갑니다

    근데 전 이걸 했는데 광고가 본문 중앙에 오는데 어떻게 해야되나요 ㅠㅠ

  • BlogIcon la Luna Rossa (2011.07.09 00:23 신고)

    감사합니다. 좋은거 배우고 가네요.
    근데 플로팅 배너의 이동 범위를 제한할 수는 없을까요?
    사이드바에 플로팅 배너를 넣었지만 이리저리 넘어다니네요.

    • BlogIcon MastmanBAN (2014.09.01 17:31 신고)

      글 하단 관련 글타래 부분을 보시면 될거 같네요. 그걸 말씀하신건진는 모르겠지만...

  • BlogIcon 공기가방 (2011.10.21 05:12 신고)

    많은 걸 배웠습니다. 너무 신기해서 제 블로그에 덕지덕지 붙여놓았답니다 ㅎㅎㅎ

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

    감사합니다.
    해당 태그를 body 바로 밑에 넣어서
    마치 자석에 붙듯이
    자꾸 화면 왼쪽 끝으로 광고가 계속 붙는 현상이 있었는데
    이 글을 읽고 article_rep_desc 위로 광고 태그를 옮겼더니
    꽤 괜찮게 해결됐네요.

티스토리 툴바