티스토리 뷰


평소에 취미로 또는 개인적인 용도로 사용하는 블로그는 하나씩 갖고 있을 것으로 알고 있다.

 

이렇게 매일 곁에서 존재하는 개인 블로그를 통하여 고정적인 수익을 얻는다는 것은 매우 흥미롭고도 참신한 생각일 수 밖에 없다.

 

대표적인 것이 구글의 애드센스, 리얼클릭의 리얼센스, 애드젯, 카우리 등을 들 수가 있는데, 블로그를 운영하는 사람들은 한번씩은 들어보고, 그 광고를 경험한 적이 있을 것이다.

 

오늘 말하고자 하는 것은 이러한 광고를 자신의 블로그에 게재하는 것 중, 가장 클릭율이 좋고 방문자들에게 눈에 띄게 어필할 수 있는 플로팅 광고에 대해서 알아 보고자 한다.

 

개인적으로 다음의 티스토리 블로그를 이용하고 있으니, 티스토리 인터페이스로 설명하도록 하겠다.

 

 

 

구글 애드센스는 현재까지의 광고 시스템 중 가장 단가가 좋은 것으로 알려져 있지만, 구글에서는 플로팅 광고 구현을 정책적으로 허용하지 않고 있으니 유의하기 바란다.

 

그리고 한가지 더, 구글 애드센스는 html 코드 중 <div> 코드 내에 광고를 게재하는 것도 금지시 하고 있다.

 

-----

 

플로팅 광고로 사용할 수 있는 광고 매체로는 리얼클릭의 리얼센스를 들 수가 있다.

 

실제로 많은 블로거들이 리얼센스를 플로팅 광고로 게재하여 많은 수익을 내고 있는 상황이다.

 

리얼센스를 플로팅 광고 속으로 넣을 수는 있지만, 분명한 것은 플로팅 광고창에 "X" 표시나 "닫기" 버튼을 반드시 달아야 하며, 그러하지 못한 경우에는 리얼클릭으로부터 제제를 받을 수가 있으니 유념하기 바란다.

 

#리얼센스 플로팅광고 정책 세부 규정 보러 가기#

 

이렇게 리얼센스의 꽃 플로팅 광고에 대하여 알아보자.

 

지금부터 포스팅하는 내용은 내 개인적인 블로그에 매칭하여 사용 중인 것으로, 만약 이 글을 보고 플로팅 광고를 게재하시는 분은 소스코드를 조금씩 수정하여 사용해야 할 것이다.

 

우선 첨부파일을 다운로드 받아 소스코드를 한번 확인하기 바란다.

 

플로팅 광고를 다는 법은 의외로 간단하며, 손쉽게 적용할 수 있을 것이다.

 

 

 

 

#사전 작업

리얼센스의 플로팅 광고 규정을 지키기 위하여 "X" 버튼이나 "닫기" 버튼이 필요한데, 개인적으로 "X" 버튼을 사용하기에, 이 아이콘을 내 블로그에 업로드 시켜야 한다.



광리자 페이지에서 "스킨 -> HTML/CSS편집 -> 파일 업로드" 에서 "X" 버튼 이미지를 업로드한다.

 

 

아래 소스 코드에서 볼 수 있듯이, 나는 "close-x.png" 파일명으로 저장하여 업로드 하였다.

 

이러한 "X" 버튼은 인터넷이나 아이콘파인더를 이용하여 손쉽게 구할 수 있을 것이다.

 

-----

 

1. 헤더 부분에 플로팅 광고를 닫을 수 있는 코드 적용

(<head> ... </head> 사이, 마지막 </head> 윗 부분에 삽입)

 

<script>
function floating_close(divid) {
var strObj = document.getElementById(divid);
 strObj.style.display = "none";
}
</script>

 

 

2. CSS/Style 부분에 광고의 가로/세로 위치 조정 및 유형 지정

(style.css 의 맨 아래 부분에 추가)

 

.fixed-top-side
{position:fixed;bottom:auto; top:5px;margin-left: -130px;}

 

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

 

 

3. 본문 body 부분에 실제로 광고코드가 표시되도록 지정

(<body> ... </body> 부분 중 [##_article_rep_desc_##] 위치를 찾아 윗부분이나 아래 부분에 삽입, 위치는 개인의 취향에 맞게 조절 가능)

 

<!-- 좌측 스크롤 배너 시작 -->
<div class="fixed-top-side" >
<div id="flotting_layer" >
<table cellpadding="0" cellspacing="4" border="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF" onClick="floating_close('flotting_layer')">
<center>

이 부분에 광고 코드를 삽입한다.

(리얼센스의 세로 사이드바 형 배너 광고 소스코드 적용)


</center>
<div style="left:100px; position:absolute; top:580px;>
<a href="javascript:floating_close('fixed-top-side');"><img src="./images/close-x.png" width="20" height="20" alt="[닫기]" style="padding:0px;border:0px;"></a>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- 좌측 스크롤 배너 끝 -->

 

-----

 

이렇게만 적용하게 되면 플로팅 광고의 구현은 끝이 난다.

 

.fixed-top-side
{position:fixed;bottom:auto; top:5px;margin-left: -130px;}

 

광고의 위치를 결정짓는 부분이 이 부분이다.

 

소스코드가 삽입되는 페이지 기준점에서 가로/세로 위치를 조절하는 것인데, 소스코드를 적용하고 나서 픽셀 값을 바꾸어 가며 확인하시면 쉽게 이해가 되리라 본다.

 

-----

 

개인적으로 플로팅광고의 규정을 지키기 위하여  버튼으로 닫기를 구현하였다.

 

그리고, 나의 플로팅 광고의 위치에 맞게 "X" 버튼의 위치를 조절한 것이니 이 광고 코드를 사용하시는 분은 구현 후 자신의 플로팅 광고의 위치에 알맞게 위치 조절이 필요할 것이다.

 

플로팅 광고가 삽입될 부분의 배경색은 검정색으로 지정하였으니, 필요에 따라 다른 색으로 rgb 값으로 조절하여 취향에 맞게 적용시키면 되겠다.

 

-----

 

<div style="left:100px; position:absolute; top:580px;>

 

 버튼도 마찬가지로 이 소스코드에서 위치를 결정하게 되는데, 보통은 플로팅 배너의 상단 구석 또는 하단 구석으로 몰게 되는데, 이 부분도 개인 플로팅 광고의 위치에 맞게 픽셀 값을 조절하여 배치하면 되겠다.

 

-----

 

플로팅 광고를 구현할 때, 가장 중요한 것이 티스토리의 규정에 맞추어야 하는 것이다.

 

플로팅 광고를 달았지만 본문 포스팅 내용을 가리게 배치하게 되면 다음 티스토리 운영 규정에 어긋나 블로그 문을 닫아야 하는 수가 있으니 이 부분도 항상 유념하여 조심스럽게 작업하기 바란다.

 

-----

 

보통 구글 애드센스에서 벗어나거나 또는 무효클릭 등의 해위로 인하여 계정이 비활성화 된 블로거들이 리얼클릭의 리얼센스로 많이 갈아타고 있는 실정이다.

 

구글의 무지막지한 펀치에 쓰러진 블로거들로서는 리얼센스가 상단히 매력적인 상품인 것이다.

 

이러한 리얼센스를 플로팅 광고를 이용하여, 수익 증대에 기여할 수 있는 기회가 되었으면 한다.

 

궁금한 내용이 있으면, 댓글 또는 공지사항의 e-mail 주소로 연락 주기 바란다.

 

개인적으로 아는 한 모든 것을 알려 드리도록 하겠다.

Floating_banner_css.txt

 

Floating_banner_tag.txt

 

util.js

 




댓글
  • 프로필사진 Favicon of https://cholgdev.tistory.com BlogIcon 처리딘 무료로 블로그 광고하고 방문자 수도 늘리세요~ http://bumup.net 2011.10.06 18:32 신고
  • 프로필사진 Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 ^^ 안녕하세요~ㅋ 2011.10.07 13:22 신고
  • 프로필사진 알 수 없는 사용자 안녕하세요 포스팅 글 잘봤습니다 저도 플로팅 광고를 달아놓았는데 집에서는 광고가 본문을 가리지 않습니다 친구한테물어보니 가린다고하네요 가장 이상적인 본문사이즈가 어떻게될까요?? 제 블로그 한번봐주시겠어요?? 2011.10.16 01:31
  • 프로필사진 Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 안녕하세요~ 들려주셔서 감사합니다~ 님 블로그 한번 들어가봤는데요, 좌우로 고정된 플로팅 광고가 아니라서, 아마도 넷북이나 해상도가 낮은 PC에서 접근을 하게 되면 본문을 가리는 것 같네요~ 저도 많은 테스트를 해봤는데, 본문을 가리게 되는 경우는 닫기 버튼이 플로팅 광고의 우측 상단에 있어야지만 낮은 해상도의 PC에서 닫기 버튼이 보이는 것으로 알고있어요~ 안그러면 방문하는 사람들이 짜증을 낼 수가 있거든요~ 닫기 버튼이 보이지 않으면요~ 참고하세요~^^ 2011.10.16 08:59 신고
  • 프로필사진 Favicon of https://honno.tistory.com BlogIcon 딩동딩 첨부파일이 어딨나요 ㅜㅜ? 2011.12.10 13:28 신고
  • 프로필사진 Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 아... 지송;; 일단 첨부파일 통으로 다 올려드릴게요~ 다음주 중에 자연스러운 플로팅과 함께 다시 설명해 드리도록 하겠습니다. 2011.12.10 15:40 신고
  • 프로필사진 알 수 없는 사용자 버튼이 상부에 안달려요;ㅠㅠ 2013.01.07 01:29
  • 프로필사진 Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 <div style="left:100px; position:absolute; top:580px;>
    위 부분이 닫기버튼의 그림이 위치할 좌표입니다. 블로그의 스킨 종류에 따라, 소스코드의 위치에 따라 좌표가 틀려지게 되오니, 화면에서 벗어난 위치에 버튼이 위치하게 될 수 있습니다. 좌표 수정 후 다시 확인해 보시기 바랍니다~~~
    2013.01.07 10:17 신고
  • 프로필사진 익명 비밀댓글입니다 2017.11.02 17:45
  • 프로필사진 Favicon of https://cezacx2.tistory.com BlogIcon 귀하신분 워드프레스 또한 html 기반으로 광고를 삽입해야 합니다.
    워드프레스는 웹 기반으로 header나 body를 수정할 수 있는 것으로 알고있습니다.
    사이드바는 티스토리와 동일하게 사이드바 메뉴에서 넣어주시면 되구요..
    저도 오래되서 기억이ㅠ

    자세한건 구글링 해보심이..;;
    2017.12.24 14:31 신고
댓글쓰기 폼
공지사항
Total
8,658,012
Today
11
Yesterday
585
«   2022/08   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
글 보관함