블로그 광고 수익모델-알라딘 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 에 적용해줍니다.
정렬된 모습을 확인합니다.


스킨공부에 도움이 될 책들





이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 날아라뽀 2009.10.30 08:03 신고

    오홋 진짜 신기하네요.ㅋ 막 움직여요.ㅋ

    perm. |  mod/del. |  reply.
  2. 라이너스 2009.10.30 08:27 신고

    깔끔한 정렬비법이네요.
    그러고보니 여기 블로그도
    참 깔끔하게 정리가 잘된곳인듯^^

    perm. |  mod/del. |  reply.
  3. 레이먼 2009.10.30 09:06 신고

    요즘 한동안 원도우7 이야기가 많이 나와서 아웃사이더가 되었다가.
    간만에 멋진 팁을 보고 글을 남깁니다.

    perm. |  mod/del. |  reply.
  4. gk 2009.10.30 11:04 신고

    정렬비법이 깔끔^^ 저같은 사람들이 보고 따라하기 좋을것같아요. 감사합니다

    perm. |  mod/del. |  reply.
  5. 드자이너김군 2009.10.30 11:37 신고

    저것을 잘 이해 하면, 이제 블로그에서 광고를 가지고 노는것 쯤은 식은죽 먹기가 되겠군요.^^

    perm. |  mod/del. |  reply.
  6. 윤초딩 2009.10.30 11:46 신고

    으흐흐
    저는 그냥 아이프레임을 땡겨서 맞췄는디 ~
    #adsttb2 iframe{
    width: 145px;
    border:0;padding:0;
    margin:0 0 0 -18px;
    }

    요게 좀더 깔끔하게 되것네요~

    perm. |  mod/del. |  reply.
  7. 2proo 2009.10.30 14:30 신고

    우와 알라딘 쓰시는 분들께는 좋은 팁이네요.
    참 저번에 애드클릭스 팁... 아주아주 감사합니다 ^^

    스킨 변경 맞추는것도 덕분에 잘 써먹었어요~ 고맙습니다~~~ ^^

    perm. |  mod/del. |  reply.
  8. Reignman 2009.10.30 15:57 신고

    역시 고수이십니다. ㅎㅎ
    사이드바에 알라딘 광고 내렸는데 다시 달까 싶네요. ^^

    perm. |  mod/del. |  reply.
  9. 용의자 2009.10.30 20:49 신고

    알라딘 광고 사용하시는 분들에게는 정말 유용한 팁 같아요~~
    많은 블로그가 마니님 블로그 처럼 깔끔하고 정돈 되었으면 좋겠어요~~ ㅎ

    perm. |  mod/del. |  reply.
  10. 이름이동기 2009.11.01 04:18 신고

    오홍 ~ ^^
    유익하고 좋은 정보 !!! 감사합니다 ~ ㅋ

    perm. |  mod/del. |  reply.
  11. 라라윈 2009.11.02 05:21 신고

    와~~ 요렇게 깔끔하게 줄을 맞출 수도 있군요! +_+
    그저 주어진대로 쓰면서 종종 마음에 안드는 부분이 있었는데..
    씨디맨님이 가르쳐주신대로 따라해봐야 겠어요~ ^^

    perm. |  mod/del. |  reply.
  12. black_H 2009.11.11 10:46 신고

    알라딘 좋아보이는군요^^

    perm. |  mod/del. |  reply.
  13. 기은아빠 2010.02.22 11:55 신고

    감사합니다. 방금 따라 해봤습니다. 후기 작성해서 올리겠습니다. 씨디맨님 덕분에 많은 시도를해볼 수 있네요 감사합니다. ㅎㅎ

    perm. |  mod/del. |  reply.
  14. 라레알 2010.06.29 19:57 신고

    블로그 초보자입니다.

    좋은정보 보고갑니다 ^^



    광고배너뿐 아니라 이미지 위치조정도 위 글과 같이 태그를 이용해야 하는지요?

    이미지를 여러개 올리려고 하는데

    일렬로 주루룩 -_ㅡ... 올라가게밖에 못하겠네요..

    한번 잠시 와서 글을 봐주시거나 안보셔도 상황이 이해가 가실거같다. 싶으시면

    도움의 한말씀 부탁드리고 싶습니다 ㅠ_ㅠ

    perm. |  mod/del. |  reply.
  15. 센쇼 2010.09.27 18:07 신고

    유용한 정보 감사합니다.

    perm. |  mod/del. |  reply.
  16. 예문당 2011.08.11 18:37 신고

    너무나도 유용하네요. 감사합니다. ^^

    perm. |  mod/del. |  reply.