티스토리 뷰


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

 

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

 

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

 

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

 

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

 

 

 

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

 

그리고 한가지 더, 구글 애드센스는 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> 부분 중


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

 

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

 

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

 

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

 

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

 

 

 

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

 

그리고 한가지 더, 구글 애드센스는 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> 부분 중 위치를 찾아 윗부분이나 아래 부분에 삽입, 위치는 개인의 취향에 맞게 조절 가능)

 

<!-- 좌측 스크롤 배너 시작 -->
<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

 



위치를 찾아 윗부분이나 아래 부분에 삽입, 위치는 개인의 취향에 맞게 조절 가능)

 

<!-- 좌측 스크롤 배너 시작 -->
<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

 




댓글