블로그 광고 수익모델-알라딘 TTB2 광고 사이드바 정렬하기 - 티스토리

당신의 광고 정렬은 안녕하십니까?

지금 이 블로그 경우 정렬은 무조건 왼쪽입니다. 군대 에서 할법한 이야기지만 줄을 착착 맞추고 있죠. 그림을 올릴때도 본문 넓이게 가능한 맞게 올려서 정렬이 되어보이도록 하려고 노력을 한답니다. 꼭 그건 아니더라도 정렬을 하고 싶은데 잘 안되는 경우 있으실겁니다.
지금부터 알라딘TTB2 광고를 정렬하는 방법에 대해서 소개해봅니다. (이 팁은 다른 광고의 정렬에도 쓰일 수 있습니다.)

광고 정렬이 안되요. 태이블등을 써서 정렬해도 안되요!

이해를 돕기 위해서 그림을 만들어 보았습니다. 사이드바에 넓이는 200px 입니다. 알라딘 TTB2 광고도 200px 로 맞춰서 올리면 딱 맞게 나와주면 좋겠지만 내부에 책과 실제 외벽과 거리가 좀 있습니다.

파란색 화살표는 정렬을 하고 싶은 기준점입니다. 사이드바의 다른 모듈들도 모두 저부분 부터 시작합니다. 그런데 TTB2 의 광고의 넓이는 200px 이지만, 그림과 같이 안쪽에 어느정도의 여백때문에 눈으로 보기에는 빨간색 화살표를 표시한 부분부터 보이게 됩니다.
때문에, 넓이를 맞춰서 넣었지만 정렬이 안되어 보일 수 있습니다.

(단 , 광고를 저런식으로 정렬을 하는 분께만 해당하는 내용입니다. 가운데 정렬을 원하는 분은 그것에 맞추면 되겠습니다.)

광고를 정렬을 해보고 싶어요 어떻게 해야 할가요?

정렬을 하려면 여러가지 방법이 있겠지만 좀 강력한 방법을 써보죠. <div></div> 를 이용하는 방법입니다.


Step 1

<div class="aladdin_sidebar">
<script type="text/javascript">
/* 사이드바1개광고 */
aladdin_ttb_key = '***********';
aladdin_ttb_channel = '*****';
aladdin_ttb_width = '243';
aladdin_ttb_height = '182';
</script>
<script type="text/javascript" language="javascript" src="http://ttb2.aladdin.co.kr/ad_ttb.aspx"></script>
</div>

위는 여러분들이 쓰시는 알라딘TTB2 광고 코드입니다. 당연 중요한부분은 * 로 처리했습니다 (복사해서 그냥쓰지마세요 -_-)
근데 바뀐점이라면, 처음과 끝부분에 노란색으로 표시된 부분입니다. 저렇게 div 로 묶어주고 이름을 aladdin_sidebar 라고 줍시다.
(이 이름이 맘에 안드시는 분은 바꾸셔도 됩니다.)

여러분의 알라딘TTB2 광고 코드에 맨위와 아래에 저렇게 붙인뒤 사이드바나 본문에 넣습니다.


Step 2

자신의 스킨의 style.css 하단에 아래와 같이 넣습니다.

.aladdin_sidebar {
    margin: -43px 0 -21px -9px;
}

위에 정렬을 설명하자면 margin (여백) 을 강제로 조절을 해서 정렬을 하는것입니다.
margin: -43px 0 -21px -9px; 의 숫자들은 차레대로 위 , 오른쪽, 아래 , 왼쪽 을 의미합니다.

/* 참고 */
값이 있을때는 반드시 단위를 써줘야합니다. 예) 9px
0 값은 단위를 생략할 수 있습니다. 예) 0 0px
왼쪽 여백만 줄이고 싶을때는 margin-left: -9px;  로 쓸 수 있습니다.

설명을 돕기 위해서 그림을 그려보았습니다. +는 당연 증가값이니 +라고 적지 않으며 - 라고 적으면 감소값입니다.
즉 왼쪽 부분마진값인 -9px 부분을 +9px 라고 적으면 오른쪽으로 9px 만큼 밀려나겠죠 근데 지금 -9px 로 적었기에 왼쪽으로 -9px 만큼 당겨지게 됩니다.

다만 이건 제 블로그에 맞춰놓은 값입니다. 여러분의 블로그에서는 다르게 값을 주어서 정렬을 해야겠죠. 아래에서 살펴봅시다.


Step 3

CSS 에 일단 값은 넣었기에 Firebug 를 통해서 값을 조정해보고 정렬을 미리해본뒤 그 값을 CSS 에 다시 적용하면 됩니다.
Firebug 에 대해서 모르시겠다면 여기를 눌러주세요. http://cdmanii.com/992


말로 들어선 이해가 잘 안되죠 ? 실제로 Firebug 로 조정해보는걸 보여드리겠습니다.

값을 조정하는것에 따라서 위아래 왼쪽 오른쪽 움직이는걸 볼 수 있습니다. 저런식으로 하면 절대 정렬이 안될것 같은것들도 정렬이 가능합니다. 일부러 교묘하게 겹쳐서 놓는다거나 그런석도 가능하게 되죠. 다만 어느정도의 여백은 문서를 여유롭게 보이게하는 요건인만큼 적당히 조절하세요 ^^


Step 4

firebug 로 또는 수작업(수작업으로 직접 찾아내신분께는 노고에 박수를) 으로 알아낸 margin 값을 실제 style.css 에 적용해줍니다.
정렬된 모습을 확인합니다.

스킨공부에 도움이 될 책들

2009/09/22 - [Useful Tips/BlogTip] - 블로그 광고수익 모델 CPC 광고 다음 애드클릭스 팁
2009/09/23 - [Useful Tips/BlogTip] - 블로그 팁 다음뷰 버튼 배경 꾸미기
2009/10/12 - [Useful Tips/BlogTip] - 예전 블로그로 접속 시 새 블로그 주소 알려주기
2009/10/08 - [Useful Tips/BlogTip] - 티스토리 블로그 관리자 글쓰기 버튼 정말 필요한가
2009/09/29 - [Useful Tips/BlogTip] - XHTML 웹표준 틀리기 쉬운 문법들