Review/IT2010.06.07 05:13




다음뷰 애드를 설치하신 분들이 많습니다. 점점 좋아질 것이라 기대 해 봅니다. 문제는 역시 디자인. 이래도 이상하고 저래도 이상하고.. 아무래도 광고 정렬은 그냥 위에 쭉 나열되고 본문은 아래에 나열되는 것이 디자인적으로 좋죠.

제 블로그 본문은 740px입니다. 구글 애드를 설치해도 공간이 남아서 저런 박스형 광고는 아예 설치를 하지 않았었습니다. 그런데 다음 애드센스를 설치하면서 어쩔 수 없이 위쪽에 광고를 배치했습니다. 그래도 기본적인 제 생각은 광고 공간과 본문 공간이 나뉘었으면 좋겠다는 생각으로 지금의 모양을 꾸며 봤습니다.
1. 기존에 이미 광고가 있던 경우
오 마이 갓~
가운데 저 공간은 대체 뭐냔 말입니다. 아래로 스크롤을 해야 볼 수 있지만 광고 사이에 있는 공간은 안습입니다. 더군다나 텍스트가 위쪽에 있을 경우에는 말입니다...
이런 젠장...
글자가 가운데로 밀려 올라가서 민망한 구조가 되어 버렸습니다.
그래서 구글을 뺐습니다.
구글 광고를 빼고 텍스트를 위로 올리니 어느정도 제대로 보입니다.
그런데 저는 이미지가 먼저 보였으면 좋겠단 말이죠. 저렇게 하려면 기존에 포스팅 한 것을 전부 바꿔야 하는 불상사가 일어날 수 있다는 불안감이 엄습해옵니다.

그래서 생각을 해 보니 그냥 위쪽에 광고로 쭉 나열을 하면 어떨까 하는 생각을 했습니다. 문제는 광고 크기가 맞지 않아 한개를 더 추가해서 정렬을 해보기로 합니다.


 
1. CSS에 추가하기

이미지 클릭

우선 구글 애드를 두 개 설치하기 위해서 Style.css에 모듈 두 개를 추가 해 놓습니다. 소스를 잘 모르시는 분을 위해 간단하게 설명한다면 float는 광고의 위치를 결정합니다. left로 하면 왼쪽. right 하시면 오른쪽이 구글 광고가 위치합니다. right로 하시면 <다음뷰 애드> 광고는 자연스럽게 왼쪽으로 이동합니다.

margin 은 광고 박스 사이의 여백을 결정합니다. 10px(상), 10px(우), 10px(하), 10px(좌) 로 됩니다. 즉 박스의 윗부분부터 시계방향으로 돌아간다고 생각하시면 됩니다.




2. SKIN.HTML에 적용하기

우선 구글을 집어 넣어야겠죠. 저는 본문이 740px 이라 작은거 하나 중간꺼 하나 넣어야 겠죠. 가로 120px 사이즈 하나, 300px 사이즈 하나 해서 두개를 넣었습니다. 그럼 250px(다음) + 300px(구글1) + 120px(구글2) = 670px이 됩니다. 나머지 빈 공간은 마진을 이용해서 공간을 벌리면 되겠습니다.

☆ 본인의 블로그 본문 크기를 알고 계시다면 다음뷰(250px)을 제외한 넒이에 적용시킬 구글 이미지를 기억하시고 몇 개를 넣을지 생각하시면 됩니다.

아래를 보시면 본문 내용에 div class로 위에 css에 적어 놓은 것을 div에 적용시키는 것입니다.
이제 좀 이해가 되나요?
div class=google_ad를 넣어서 원하는 방향에 자리 잡도록 배치 했습니다. 이후 빈 공간은 margin(마진)값을 써서 조절을 했죠. 소스가 필요하신 분은 아래 파일을 클릭하시면 됩니다.




아무리 광고 정렬을 해도 텍스트가 위로 솟구치는 것이 있을 수 있습니다. DIV나 소스를 써서 텍스트가 흐르지 않게 하는 방법도 있지만, 가장 간편한 것은...

아래처럼 본문을 가로 지르는 긴 줄 이미지를 하나 넣으시면 됩니다. 제 광고 이미지 바로 아래에 점선 이미지 보이시죠? 저거 하나 넣어두면 텍스트가 위로 솟구치는 것을 막을 수 있습니다. ^^


- 더공 -


Posted by 더공

댓글을 달아 주세요

  1. 와~ 좋은 팁이네요.
    감사합니다~

    2010.06.07 10:29 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 우와 대단하십니다.. 역시 더공님이 가르쳐주신대로 해야하는데.. 쉽게 손이 가질 않네요...
    지금 뷰AD만으론 역시 엉성해요.. ㅎㅎ

    2010.06.07 16:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • BK님은 구글 애드센스 하나만 놓으면 될 것 같아보입니다. ^^
      천천히 시간날때 해 보세요~

      2010.06.07 18:30 신고 [ ADDR : EDIT/ DEL ]
  3. 역시`~~깔끔하네요.`~
    저는 포스팅 할 시간도 대략 ..없는지라.걍 내비두기로 하였습니다~~~ㅎㅎㅎ

    2010.06.08 19:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 천천히 시간날 때 하세요. ^^
      저느 정렬된 것을 좋아해서 그냥 후딱 했네요. ㅎ

      2010.06.09 10:58 신고 [ ADDR : EDIT/ DEL ]
  4. 좋은 정보 가르쳐 주셔서 감사합니다ㅎㅎ 필요하신 분들이 많을 것 같네요.. 저는 뭐 광고는 꿈도 안꿔영 -ㅅ-ㅋ

    2010.06.11 16:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 좋은 정보 감사합니다^^그런데 뷰온이랑 믹스업 밑에
    구독+해주세요 적어놓으신건 어떻게 하는거에요??
    도저히 저위치에 문구를 넣을 수가 없네요 ㅠㅠ

    2010.08.05 18:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 더공님!
    제가 블로그 만들때 애드센스와의 배치땜시 고민했거든요.
    그런데 더공님 만나서 해결.... 그래서 알게되었지요.
    하여간 늦게 인사드리네요. 죄송합니다. 더공님...

    2010.11.16 23:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 아.. 도움이 되셨다니 정말 다행입니다.
      사실 많은 분들이 제 포스팅을 보시고서도 하고는 싶은데
      제대로 하질 못해서 그냥 텍스트를 옆으로 흐르게 해서 블로깅을 하시고 계시더라고요. ^^
      맘 같아선 대신 정렬 해 드리고 싶지만..ㅎㅎ

      2010.11.16 23:28 신고 [ ADDR : EDIT/ DEL ]
  7. 오오 유익하게 잘 보았습니다 ㅋ

    2011.01.05 13:07 신고 [ ADDR : EDIT/ DEL : REPLY ]