본문 바로가기

블로그/일반

포스트 본문을 2단으로 나눠 광고하고 싶으시면, 이렇게 해보세요.

 

저도 블로그 초보인데, 저에게 포스트 본문을 어떻게 2단으로 나누어 사용하는지(위의 사진 또는 제 블로그와 같이) 여쭈어 보시는 이웃 블로거들이 꽤 계십니다.

 

사실..저도 처음에 블로그들을 방문하면서 다니다 보면,

구글 애드센스 (또는, 일반광고 패널)를 포스트 상당맨위 좌측,또는 우측에 배치하고,

본문은 그것을 옆에서 타면서, 자연스럽게 물흐르듯..써지는 형태의 블로그들을 보면서..

"나름 깔끔하고 보기 좋네~"

라고만 생각한 적이 있었습니다..

 

처음에는 그러려니 했는데..

블로거 이웃중에 "지우개 닷컴"님의 포스트를 한번 보고나서 필을확 받았지요...ㅋㅋㅋ

 

지우개 닷컴님의 구글애드센스 최적화와 관련하여, 클릭율 증가와 관련된 아래 포스트는 한번 정도 참고하시면 좋을것 같네요~

 

구글 애드센스 클릭율 증가비법 ==> http://www.ziwoogae.com/930

 

이 포스트를 읽어 보시면, 사람들의 시선본능이, Z, F 형으로 진행됨을 알 수 있습니다.

 

어린시절..한창 속독법이란것이 유행한적이 있었습니다.

책을 읽는것이 아니라 머리속에 그림처럼 꽂아두는 훈련법인데,

여기에 바탕이되는 글습득 메카니즘도 Z 방식입니다.

 

그리고, F 방식은 과거 제가 애플사에 잠시있었을때도 유저인터페이스 가이드라인에서 귀에 따갑게 들었던 내용인데,

이 논리는 타겟팅된 방문객은 항상 자신의 목적을 빠르게 습득할 목적으로,

메뉴라는 범주를 먼저 스캔하고, 그 뒤 메뉴에 근접해 있는, 글들을 본게 된다는.., 그런 내용입니다.

 

두가지를 조합해 볼때 2단편집은 광고를 싫어하는 일반 블로거에게는 어쩔수 없겠지만,

실제 타겟팅된 방문자를 광고속으로 밀어넣는다는 방식에서는 매우 실질적인 효과를 가져올 수 있습니다.

특히 미국의 경우 오른손보다 왼손을 많이 쓰는 분들이 꽤 있는데, 이분들은 이와는 반대로 배치를 하지요.

 

어쨋든,,

 

저도 지우개님의 그 글을보고, html을 구현해볼려고..

돌아가지도 않는 머리로, 네이버 지식인 뒤지고..구글 뒤져도..

키워드를 잘못 사용했는지는 모르겠지만..."딱!!! 이거닷~" 하는 솔루션은 없더군요..

쩝..그래두,,답답한 놈이 우물파는 법이죠..ㅋㅋ

 

그래서 저는 드림위버의 템플릿가운데, 다단 편집모듈을 조금 떼어와서,

노트패드에 메모해 놓고, 걍 씁니다..(무식하지만..it 옷벗고 10년이상 지내면 저처럼 됩니다..ㅋㅋㅋㅋ)

당연히 정답일 수 없겠지만, 정답을 보유하고 계신 선수 it 블로거분들의 트랙백 기대해 봅니다.

 

티스토리 편집시 본문 부분 2단편집 적용 순서는 다음과 같습니다.

 

헤더 작업 [최초1회 작업해 줍니다.]

 

0. 스킨메뉴-->html/css편집창으로 가신후, style.css 편집창이 있을겁니다. 그 편집창 맨 아래쪽에 아래 코드를 삽입합니다.

 

.feature div{
 float: right;
 padding: 0px 5px 5px 10px;
 margin: 0px 0px 0px 0px;
}



 

본문 작업 [본문을 작성한 후, 항상 아래작업을 해 줍니다.]

 

1. 티스토리 편집창에서 글을 모두 다 씁니다.

 

2. 맨위에 대표사진을 하나 넣습니다..

 

    만일, 글 내용이 대표사진이 없을법한 내용이면,

    바탕색이 흰색인 (안보일 목적) 조그만 사진을 하나 첨부하여 맨위에 넣습니다.(미리 만들어 둔 것으로)

 

3. 편집창위에 HTML 이라고 써있는 체크버튼을 클릭합니다.

 

4. 그러면 보통 아래와 같은 html 형태로 나타날겁니다..

 


5. 위 그림에서 보듯, 빨간 화살표 친 위치에..아래 코드를 집어 넣고, (div 시작)

 

<!-- 2단 시작, 맨위 첫사진 바로 아래에 붙여준다. -->
<div class="feature">
<div>

요안에..자신의 구글 애드센스 스크립트를 넣으세요.

독립적으로 떠다닐 내용을 넣으시면 됩니다.

</div>

 

6. 마지막으로  본문속 적당한곳(구글 광고크기를 벗어날 정도로 충분량의 글을 포함)에 아래 코드를 집어 넣어줍니다. (div 종료)

 

</div><!-- 2단 끝 -->

 

8. 6,7에서 div 태그로 둘러쌓인 곳 에는, 가능하면, 다른 그림파일이나, 복잡한 코드(div, table, layer)가 없어야, 별 충돌없이 잘 돌아갑니다.

 

그러면 제 포스트의 본문과 같이, 부분 2단 편집이 가능해 집니다.

 

이 글 보시는 개발사 여러분들 가운데,,

더 좋은 솔루션 있으시면 꼭~ 트랙백으로 알려주세요^^