테터 툴즈에서 adSense 나 다른 광고들을 본문의 최상단 오른쪽에 어울리게 배치하는 방법에 대해서 물어본 사람이 있어서 관련된 포스트를 쓴다.

뭐,. 다른 사람도 궁금해 할 것같고,. 나도 나중에 다시 보기 위해 포스팅 해 본다.



테터툴즈에서 쓰는 것을 기준으로~

1. 자신이 쓰는 스킨에서 "_article_rep_desc_" 이 문자열을 찾는다.
이 문자열은 테터툴즈에서 블로그 본문 내용에 해당하는 치환자이다.
다른 치환자들에 대해서는 태터툴즈 스킨제작 레퍼런스를 참고하자~


2. 본문 내용의 위나 아래에 광고등을 넣으려면 저 치환자의 위나 아래에 광고를 추가하면 된다.
두가지 방식이 있는데

첫번째는 테이블로 만드는 방법
<table border="0" align="right"><tr><td>
<!-- 이 부분에 광고 내용을 추가하기 -->
</td></tr></table>

장점이라면 광고의 크기와 상관없이 어떤 크기든 상관없이 사용가능하다.

두번째는 css로 만드는 방법
이 방법은 다른 분이 써 놓은 것이 있어서 잠깐 인용하고자 한다.

아래의 방법을 쓰면 밑의 그림을 보는 것처럼 꾸밀 수 있다. 조금만 창의성이 있다면 뒤 배경 그림을 바꾸면 훨씬 더 좋게 바꿀 수도 있으리라



a77ila님의 코멘트 에서

정말 이쁘네요... 마음껏 따라 하라는데요...

이미지는 <a href="http://www.karencheng.com.au/images/paper03.jpg">여기</a> 서 받고,

CSS에는

paper
{
width: 200px;
height:210px;
background: #fff url(cardboard.jpg) top no-repeat;
}
.aditem_paper
{
padding: 28px 0px 0px 45px;
}

그리고, 광고가 들어갈 곳에는

<div class="paper">
<div class="aditem_paper">
[ Insert ad code here ]
</div>
</div>

광고 포맷은 125 x 125
경계선, 백그라운드, 색은 모두 #FFFDF7
텍스트 색은 #666666
링크와 URL 색은 #666666

이것의 장점은 언제든 광고 형태를 쉽게 바꿀 수 있다. css만 바꾼다면 말이다.
그렇지만 이 경우에는 꼭 그렇지만은 않을 것 같다. 어차피 다른 종류의 광고를 노출시킬려면 광고 코드를 받아서 스킨을 바꿔야 하니,. 어차피 한번은 바꿔야 하니까,.

위 배경 그림 파일은 여기에,..


참고로 위의 방법대로 하다보면 제대로 안될 때가 있다. 글 내용이 광고 위로 나와버리는 현상이 생기는데 그것때문에 많이 헤맸다.

이유는 css로 정의된 div 안에 넣지 않고 div 밖에 광고를 배치했었기 때문이었다.
그러니까 "_article_rep_desc_" 이 문자열의 바로 위나 바로 아래에 광고 코드를 넣으면 된다

그런데 이런식으로 본문 내용 위나 아래에 넣는 것이 좋은지는 고민중이다. 과연 이렇게 하면 포스트 보는데 방해가 되진 않을런지,... 아마도 나는 조만간 다른 방법을 찾을 것 같다.

도구는 도구일뿐,.. 어떻게 쓸지는 각자,... ^^