플로팅 베너의 닫기 버튼 광고 내부에 달기

리얼센스의 가장 큰 장점은 애드센스에서는 할 수 없었던 다양한 형태의 광고를 할 수 있다는 데 있습니다.

그중에서도 많은 분들의 호응도가 높은 광고가 본문글을 가리는 플로팅 광고가 아닐까 합니다.
플로팅 광고가 글을 읽는 분들에게는 귀찮고 짜증나는 광고임을 부정할 수 없지만, 블로그를 통해 약간의 용돈이라도 벌 생각을 가지고 있는 블로거에게는 매우 좋은 수입원임도 부정할 수 없는 것 같습니다.

[IT/Blog] - 리얼센스의 본문을 가리는 플로팅 배너 효과

보통 많이들 사용하시는 리얼센스의 플로팅 배너는 광고의 상단이나 하단에 [닫기] 버튼이나 [X] 버튼을 만들어 이용하는 형태입니다.

블로그에서 리얼센스를 이용한 플로팅 배너의 형태는 대부분 좌측의 형태를 취하고 있습니다.

이 경우도, 물론 클릭을 유도할 수 있지만 어차피 방문객에게 불편을 주면서 광고를 한는 것이면 1회라도 클릭을 더 발생시키는 게 좋다는 생각이 들었습니다.

리얼센스의 플로팅 광고 세부규정에 따르면(공지 보러가기)
- 플로팅 광고는 닫기, X등으로 명확하게 인지되는 창닫기 기능 버튼이 구비되어야 함
- 닫기 버튼의 사이즈는 19 X 19픽셀 이상
으로 규정하고 있습니다.

 

어차피 방문객에게 욕먹을 각오로 플로팅 광고를 시작했기 때문에...
오른쪽과 같이 1회의 Click이라도 발생시키기 위해 [닫기] 버튼을 광고 내로 옮겼습니다.

단순한 것 같지만, 나름대로 고민을 많이 한 [X] 버튼입니다...ㅎㅎ

- [X]표를 누르려다가 약간만 벗어나도 광고가 클릭되고
- 규정을 만족시키도록 버튼은 20 X 20으로 만들었습니다.
- 가장 심혈을 기울인 점은 [X]버튼을 맨 끝으로 보내지 않은 점입니다.
   맨 끝으로 보내면 마우스가 미끌해서 실수로 클릭하는 영역이 2면밖에 되지 않지만,
   위, 우측에 약간의 공간을 두어 [X]버튼의 4면 모두 광고의 함정으로 만든 것이죠...ㅋㅋ

플로팅 배너를 처음 설치할 때부터 위의 형태로 만들어서 두가지의 광고의 효과적인 측면을 정확히 파악하지는 못했습니다.
다만, 뉴스 사이트에서 가끔 저도 [X]버튼 클릭하려다 실수로 광고를 클릭한 경험이 있기 때문에 분명 효과는 있을 것이라는 생각입니다.

플로팅 배너내 닫기 버튼 만들기

플로팅 광고 내에 [X]버튼을 넣는 방법은 의외로 간단합니다.
먼저, 플로팅 광고를 본문에 삽입합니다.([IT/Blog] - 화면에 고정된 듯 스크롤을 따라 움직이는 플로팅 배너 설치 방법)
위의 포스트에서 아래쪽의 "본문을 가리는 플로팅 배너"를 이용하시면 됩니다.

다음으로 [X]버튼을 만들어 자신의 Tistory계정에 파일업로드를 해줍니다.

[X] 버튼은 직접 만드셔도 되고, Iconfinder와 같은 무료 아이콘 사이트에서 다운 받으셔도 됩니다. 전 Iconfinder에서 받아서 사용했습니다.
파일을 올리신 후, 미리보기를 통해 이미지가 정상적으로 업로드 되었는지 확인합니다.
업로드 할 때 파일명도 중요하겠죠. 전 close_bt.png로 했습니다. 

Skin.html에서 플로팅 배너의 소스를 변경합니다.

<!-- 본문내 고정 플로팅 배너 시작 -->   <div class="fixed-top" >   <div id="fixed-top">    <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">     <tr>      <td align="center" >       광고소스 또는 배너 이미지 소스 (예 : 리얼센스 스크립트)       </td>     </tr>     <tr>    <td height="10" align="center" style="background-color:#000000;color:black;"><a href="javascript:floating_close('fixed-top');" style="color:#FFFFFF; text-decoration:none; font-size:12px;"><strong>[닫기]</strong></a></td>   </tr>  </table> </div></div> <!-- 본문내 고정 플로팅 배너 끝 -->

위에 링크를 보시고 플로팅 배너를 만드셨다면, 위의 소스대로 되어 있습니다.

이것을 아래의 소스처럼 변경해 줍니다.

<!-- 본문내 고정 플로팅 배너 시작 -->   <div class="fixed-top">   <div id="fixed-top">      <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">        <tr>         <td align="center">          광고소스 또는 배너 이미지 소스(예: 리얼센스 스크립트)           <div style="left: 220px; position: absolute; top: 10px"><a href="javascript:floating_close('fixed-top');"><img src="./images/close_bt.png"  width="20" height="20" alt="닫기" style="padding:0px;border:0px;"></a>         </div>        </td></tr>  </table> </div></div> <!-- 본문내 고정 플로팅 배너 끝 -->

원래 소스의 파란색을 삭제하고 빨간색을 넣어 주시면 됩니다.
간단히 소스에 대해 설명 드리면, 기존 소스는 테이블로 2행을 만들어 1행에는 광고가 2행에는 닫기버튼을 만든 것이고
변경한 소스는 1행짜리 테이블에 [X]이미지 레이어를 새롭게 띄워서 광고 위에 [X]표가 나오도록 한 것입니다.

html을 전혀 모르시는 초보자분들만을 위한 주의사항은
- [X]버튼의 파일이름에 맞춰서 변경소스의 img src="./images/파일이름" 을 꼭 변경해주세요.
- div class와 id값이 fixed-top이 아닌 다른 이름으로 바꾸셨으면, 빨간색 소스에서 floating_close('바꾼이름') 으로 변경해주세요.
- table의 배경은 검은색(#000000)으로 되어 있습니다. 바꾸고 싶으시면 bgcolor값을 변경하시면 됩니다.

플로팅배너와 관련된 글
[IT/Blog] - 리얼센스의 본문을 가리는 플로팅 배너 효과
[IT/Blog] - 리얼센스 플로팅 배너의 2가지 종류
[IT/Blog] - 스크롤을 따라 자연스럽게 움직이는 플로팅 배너 설치방법
[IT/Blog] - 화면에 고정된 듯 스크롤을 따라 움직이는 플로팅 배너 설치 방법