티스토리 블로그에서 가장 많이 사용하는 구글 애드센스 광고를 정렬하는 방법을 보니 Table 태그를 많이 사용하시는것 같아서, 이번에는 Div태그를 이용한 구글 애드센스 광고 배치에 관한 방법니다.

■ 구글 애드센스 2개 나란히 정렬하기

아마 가장 많이 사용하고, 가장 궁금해 하시는 방법이 아닐까 생각이 드네요^^
저도 현재 구글 애드센스 광고 2개를 나란히 노출하고 있습니다.


▶ HTML

<div class="ad_google">
    <div class="google_left">
        왼쪽 구글 애드센스 광고 코드 입력
    </div>
    <div class="google_right">
        왼쪽 구글 애드센스 광고 코드 입력
    </div>
</div>

▶ CSS

.ad_google{overflow:hidden;width:100%;padding-bottom:30px;}
.ad_google .google_left{float:left;width:300px;}
.ad_google .google_right{float:right;width:300px;}

■ 구글 애드센스와 다음 뷰애드 나란히 정렬하기

요즘 다음에서 뷰애드가 블로그에 붙으면서 정렬이 이상하게 보여, 구글 애드센스 광고를 1개로 줄이고 뷰애드와 나란히 정렬하는 블로그가 많이 생기고 있습니다.^^ 저는 아직 뷰애드를 계속할지 고민중이여서 나란히 배치는 안하고 있답니다^^;;
다음 뷰애드의 경우 위치나 코드를 수정할 수 없습니다. 수정을 할 경우 불이익이 생길 수 있죠; 그렇기 때문에 구글 애드센스 광고 코드를 수정하는 방법 밖에 없습니다.


▶ HTML

<div class="ad_google">
구글 애드센스 광고 코드
</div>

▶ CSS

.ad_google{float:left;width:423px;padding-bottom:30px;}

어떻게보면 간단하게 보일지 모르지만, 이렇게 적용할 경우 포스팅의 글들이 광고 사이사이로 올라오는것을 보실 수 있습니다. 약간은 불안한 모습이 보이죠 ^^

해결 방법은 구글광고의 div의 width값을 빈 공간 없이 딱 맞게 하는 방법과, 포스팅 작성 시 가로 사이즈가 긴 이미지로 시작하는 방법이 있겠죠~
신고
Posted by 별군

댓글을 달아 주세요

  1. 전 구글애드센스를 달지 않고 있어서 문제는 없지만
    다음뷰애드가 덩그라니 있어서 답답할 때가 종종 있습니다,

    2010.07.22 07:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 광고 2개에 뷰애드만 있으면 뷰애드 옆에 빈공간이 보기 싫어서;;; 이미지로 포스팅을 시작하죠;;;

      2010.07.22 09:57 신고 [ ADDR : EDIT/ DEL ]
  2. 역시 애드센스는 블로거의 희망인듯.. ^^

    2010.07.22 08:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저같은 경우엔;; 거의 블로그 수익은 애드센스에서만 발생해서... 희망이죠 ㅠ

      2010.07.22 09:57 신고 [ ADDR : EDIT/ DEL ]
  3. 다음애드뷰랑 구글애드센스 적당히 조정은 했지만.
    너무 번거롭더라구요 ^^;;

    2010.07.22 09:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 다음뷰애드만 css 수정이 가능하면 어떻게든 해보겠는데;;; 건드리면 불이익이 생겨서... 번거로운 작업이 너무 많죠;;;

      2010.07.22 09:58 신고 [ ADDR : EDIT/ DEL ]
  4. 구글광고 배치하고자 애쓰는 분들에게 좋은정보가 되겠어요^^ 잘보구 갑니당~!

    2010.07.22 09:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다.^^
      구글광고는 마음데로 위치조정이 가능해서 좋은것 같아요

      2010.07.22 09:59 신고 [ ADDR : EDIT/ DEL ]
  5. div로 하는방법도 간단하네요.^^
    좋은 정보 잘 보고 갑니다.^^ 트랙백도 남겨요~

    2010.07.22 11:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 넵^^
      코드는 간단해지는데 css 추가를 해야하는 점이 있죠;

      2010.07.22 11:03 신고 [ ADDR : EDIT/ DEL ]
  6. div로 하는방법도 간단하네요.^^
    좋은 정보 잘 보고 갑니다.^^ 트랙백도 남겨요~

    2010.07.22 11:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 블로그 초보시절...요거 때문에 매우 고생했던 기억이 납니다. 어찌어찌 설치했는데...
    다시 보니...기억이 가물가물....암튼...너무 좋은 팁이네요.~~

    2010.07.22 11:24 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 크흑~~ 전 그냥 테이블 테그로 사이를 띄워놨답니다.
    div가 관리가 좀 더 편하긴 하지만 전 습관적으로 무조건 테이블만 쓰네요 ㅠㅠ

    2010.07.22 23:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 아무래도 초반에 가장 많이 알려진 방법이 테이블태그죠 ^^
      자신이 편한 방법이 가장 좋지만, 웹표준에 맞는 코드로 블로그를 바꾸는 것도 좋겠죠~^^

      2010.07.23 00:34 신고 [ ADDR : EDIT/ DEL ]
  9. 잘 읽고갑니당~

    2010.11.02 01:29 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바