본문 바로가기

블로그

[플로팅 배너(Floating Banner)] 리얼센스 광고를 플로팅 배너로 달아보자.


블로그 광고 매체인 리얼센스에 광고를 여러가지 배너로 삽입하는 방법은 정말 많습니다.

하지만 구글 애드센스에 광고는 삽입 방법이 한정되어 있습니다.

리얼센스 광고를 효과적으로 삽입해 볼수있는 방법이 바로 플로팅 배너(Floating Banner)또는 스크롤 배너
입니다.

대부분 블로거들이 스크롤 배너보다는 플로팅 배너라는 말을 사용하기 때문에 저는 플로팅 배너라고 본문에 적겠습니다.
 
플로팅 배너를 달아두면 블로그 본문 항상 옆에 노출되고 본문을 스크롤 하게되면

자연스럽게 본문을 따라 다니게되어서 노출수와 클릭률이 올라가게 됩니다.

 사진속의 본문 옆 왼쪽 광고가 플로팅 배너입니다.

TOKYO-HOT님 블로그

 TOKYO-HOT님에 따르면 블로그 광고 수입의 대부분이 플로팅 배너에서 이루어 진다고 합니다.

 이분 말고도 이미 다른 블로거들에 의해 플로팅 배너에 효과는 입증이 되었습니다.

이 플로팅 배너는 
TOKYO-HOT님과는 다르게 자연스럽게 따라다니는

플로팅 배너가 아닌 화면에 고정된듯한 플로팅 배너입니다.

추가로 리얼센스(리얼클릭)는 플로팅 배너를 사용하실수 있지만

구글애드센스는 플로팅 배너를 사용이 불가능 하다고하니 참고하시기 바랍니다.
 



 위에 txt 파일을 받아 -CSS- 부분을 복사를 합니다.

그리고 본인블로그.tistory.com/admin/skin/edit?mode=edit 에 들어가서style.css최하단에 추가를 합니다.
 

최하단
 

/* 플로팅 배너 메뉴 (Floating Banner) */


#floatdiv {

 

   position:fixed; _position:absolute; _z-index:-1;

    width:180px;

    overflow:hidden;

    left:0px;

    top:0px;

    background-color: transparent;

    margin:0;

    padding:0;


}


#floatdiv ul  { list-style: none; }

#floatdiv li  { margin-bottom: 2px; text-align: center; }

#floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; }

#floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; }

#floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; }


left는 플로그 왼쪽에서 
몇픽셀(px)뛸건지를 top은 블로그 상단에서 몇픽셀(px)뛸건지를 정하는 겁니다.

스킨 편집후 -HTML- 입력후 미리보기를 이용해 조절합니다.


다음으로는 txt 파일에 -HTML-부분을 복사를합니다.

-HTML-은 skin.html에 <head>와 </head> 아무곳이나 사이에 추가하면됩니다.

<head>

<div id="floatdiv">

    <ul>

        


광고 스크립트


    </ul>

</div>

</head>

 
막상 플로팅 배너를 달어보면 어렵지 않다는걸 느끼게 됩니다.

이쉬운 플로팅 배너를 달아보시고 제 글을 읽으신 분들이 클릭률이 향상되었으면 좋겠습니다.

 궁금하신점은 댓글로 문의를 해주시면 답변 드리겠습니다.