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

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

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

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

• [두두맨]리얼센스 떠다니는 광고 후기

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

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

• 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은 상단에서의 픽셀입니다. 사용자가 원하는 수치로 바꿔주시면 됩니다.

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

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

관련 글타래

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