블로그 광고 수익 모델-구글 애드센스 본문 상단 2개 넣는 방법

본문 상단에 2단의 광고 어떻게 넣어야할까?


구글 애드센스 광고를 티스토리 블로그 상단에 넣는 방법은 많이 공개 되어있죠. 다만 구조와 스타일을 분리해서 티스토리 블로그에 넣는 방법에 대해서 소개를 해볼까 합니다. 제 티스토리 블로그의 본문 상단의 구글 애드센스 광고도 이렇게 구조와 스타일이 분리되어 적용되어 있습니다.

본문 상단에 구글 애드센스 광고를 넣은 블로거들의 블로그를 보면 상당수는 <table> 를 썻거나 또는 스타일(style) 를 분리를 안해둔 경우가 많네요. 구조와 스타일을 분리를 해서 올바르게 넣는 방법 및 설정을 하는 방법에 대해서 설명합니다.




블로그 상단에 구글애드센스를 2단으로 넣어둔 모습입니다. 파란색박스 부분은 구글애드센스 부분이며, 아래의 노란색부분은 구글애드센스를 묶고있는 박스의 하단여백부분입니다.




구글애드센스 실제로 넣어보자 (동영상 설명)


skin.html 수정

<div id="googleTop">
     <div class="googleLeft">
          <!-- 구글광고 왼쪽 -->
     </div>
     <div class="googleRight">
          <!-- 구글광고 오른쪽 -->
     </div>
</div>

skin.html 에 [샵샵_article_rep_desc_샵샵] 바로 위에 위의 내용을 넣습니다.
구글광고 왼쪽,오른쪽은 자신이 생성한 구글애드센스 코드를 넣어줍니다.


style.css 수정

/*구글 상단 광고 */
#googleTop {height:250px; width:640px; overflow:hidden; margin-bottom: 20px; }
#googleTop .googleLeft {
    float:left;
    width:300px;
}
#googleTop .googleRight {
    float:right;
    width:300px;
}

style.css 맨 하단에 위의 내용을 붙여 넣습니다. css 에서 내용을 조절하여 본문 상단의 구글애드센스의 스타일을 조절 할 수 있습니다.

2단의 구글애드센스 박스 크기는 640px 로 하단의 본문과의 거리는 20px 로 설정
왼쪽, 오른쪽의 class 박스는 왼쪽, 오른쪽으로 정렬을 하며, 넓이는 각각 300px 로 한다는 내용입니다.
보통 본문의 넓이가 640px 정도이므로 이것으로 해보았습니다. (제 블로그에도 위와같이 설정되어 있습니다)





구글애드센스 구조와 스타일을 분리하는 이유?


skin.html 는 구조에 해당합니다. style.css 는 스타일에 해당합니다. 구조와 스타일을 분리하는 이유는 여러가지 장점이 있기 때문입니다. 반복되는 스타일을 정의를 해서 계속 반복해서 사용이 가능하며, 때문에 코드갯수를 줄일 수 있어서 페이지가 더 빠르게 뜨게 할 수 있습니다. 그리고 어느 누가 보더라도 쉽게 파악할 수 있습니다. 또한 스타일만 수정하여 같은 스타일이 적용된 부분을 한번에 모두 변경할 수 있습니다.


구글애드센스 관련 팁



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

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

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

댓글 입력 폼

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

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

  1. 이전 댓글 더보기
  2. 이기쁨 2010.01.02 08:42 신고

    저도 티스토리 하고 싶어요 ㅜㅜ 잘읽었습니다^^

    perm. |  mod/del. |  reply.
  3. 미후왕 2010.02.25 20:29 신고

    블로그 생 초보입니다. 멋진 팁 감사드립니다.

    perm. |  mod/del. |  reply.
  4. ImpactXP 2010.03.04 11:27 신고

    좋은 정보 고맙습니다.
    여태 잘 하지도 못한 소스 수정한다고 적용했다가 바꿨다가 했었는데 에디트플러스로 수정해서
    사용하니 편리하고 좋네요.
    굿! 광고 하나 클릭하고 가야겠네요.ㅎㅎ

    perm. |  mod/del. |  reply.
  5. Holmes 2010.03.23 09:57 신고

    좋은 정보였습니다
    감사합니다

    perm. |  mod/del. |  reply.
  6. 이남자 2010.04.27 15:35 신고

    너무너무 감사합니다ㅠㅠ
    덕분에 잘 달았어요~~

    perm. |  mod/del. |  reply.
  7. 셉이 2010.05.19 21:44 신고

    감사합니다!
    제가 블로그에 광고를 2개 배치하면 파폭에서는 잘 보이는데 항상 IE6(킁;;)에서는 광고 한개한개가 서로 줄에 배치되는 것 때문에 고민했었는데, 덕분에 배치가 됬어요.

    좋은 하루 되세요~

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.09 23:26 신고

      지금은 구글광고 떼어내신건가요? 지금 안보여서 그래요. 만약 삭제된거라면 다른 메일로 구글 다시 신청하면 되거든요. 저도 한번 짤린 경험이 있어서요 ㅋ;

      perm. |  mod/del. | 
    • 코요 2010.06.13 21:37 신고

      아뇨, 저는 방문자도 소소한 편인데, 100달러 채우려면 너무 오래 걸릴 것 같아서요. 그냥 간단하게 올블릿 하나 달고 있어요 :)

      perm. |  mod/del. | 
  8. thinkingpig 2010.06.01 23:52 신고

    그런데 저는 왜 광고 2개가 세로로 배치되죠???

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.06.09 23:24 신고

      테이블로 넣으셨네요. 테이블 보다는 div 로 넣는게 더 옳은것에 근접한 방법이라 이 글을 적은것이였구요. 이 글대로 해주시면 원하시는대로 뜰겁니다. ^^

      perm. |  mod/del. | 
    • 지식아이 2010.06.09 23:25 신고

      저도 처음에 그대로 적용하니 광고 두개가 세로로 나오더군요^^;; CSS부분에서 현재 640px로 되어 있는 googleTop의 width를 사용자에 따라 바꿔줘야 됩니다. 수정할 값은 [스킨>화면출력 설정]에서 본문 가로크기를 넣어 주시면 되요^^

      perm. |  mod/del. | 
    • thinkingpig 2010.06.09 23:31 신고

      씨디맨님 안녕하세요^^
      씨디맨님이 가르쳐주신 대로 했는데 계속 광고가 세로로 배치되요ㅜㅜ.
      각종 수치를 다 조종해 가면서 해도 결과는 역시 세로 ㅜㅜ.
      그래서 어쩔 수 없이 테이블을 이용했습니다.
      제 실력으로는 어쩔 수 없는 것 같기도 하고 ㅜㅜ

      perm. |  mod/del. | 
    • 씨디맨 2010.06.09 23:34 신고

      아 그러시군요.

      지금 보니 구글 광고 1개가 330px 사이즈네요. 두개면 660px 사이즈가 될테니

      #googleTop {height:330px; width:690px; overflow:hidden; margin-bottom: 20px; }
      #googleTop .googleLeft {
      float:left;
      width:340px;
      }
      #googleTop .googleRight {
      float:right;
      width:340px;
      }

      이렇게 적용하시면 원하시는대로 2단으로 나올거예요. 한칸의 사이즈가 330px 인데 지금 제가 공개한건 300px 사이즈에 맞게 만든거거든요. 그래서 밀려서 2단으로 나왔네요. 위와 같이 적용하시면 될거예요. ^^

      perm. |  mod/del. | 
    • 씨디맨 2010.06.09 23:35 신고

      지식아이님 댓글도 감사합니다. ^^ 댓글들이 모여서 다른분들에게도 도움을 줄거예요. 너무 감사해요.

      perm. |  mod/del. | 
  9. 지식아이 2010.06.09 23:16 신고

    구글 광고 넣으면서도 이해를 못해서 제가 넣고 싶은 위치에 못 넣어서 고생을 많이 했는데 씨디님 덕분에 깔끔하게 해결 했습니다.^^ 역시 이해를 하니 응용이 되는 군요ㅎㅎ 필요했던 정보였는데 감사합니다.

    perm. |  mod/del. |  reply.
  10. 2010.08.16 22:16

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.08.16 22:30 신고

      음 .. 짤려보이진 않는듯해요. 만약 짤린다면 그건 div 에 padding 를 전혀 주지 않아서 너무 꽉 차보여서 짤렸을 수 있죠.

      제가 공개한 이 팁대로 한번 해보시는게 어떨까요. 2단으로 놓는게 사실 더 깔끔하거든요. 제가 공개한 이 팁은 당연 아래쪽 에 마진도 둘 수 있어서 본문과 깔끔하게 잘 나타납니다.

      지금 보면 div 에 id 또는 class 가 없고 align 만 설정해 두셨네요. 그러면 넓이가 100% 로 뜨면서 말그대로 상단에 1단만 뜰겁니다. 1단만 띄울거면 차라리 div 의 크기를 조절해서 본문과 같이 뜨도록 하는게 맞을듯하구요. 아니면 저 처럼 2단으로 띄우는게 더 적합하지 않을까 생각듭니다.

      perm. |  mod/del. | 
  11. 닉쑤 2010.10.26 06:33 신고

    이번에 스킨을 바꿨는데,

    파이어폭스에서 본문이 완전 엉망이더라구요.

    보니깐 원인이 구글애드센스던데,

    div로 했었는데 안되길래 다른 방법 알아보다가

    씨디맨님꺼 보고 따라하니 바로 적용되는군요!!
    ㅎㅎ

    뭐가 문젠지는 모르지만.. 여튼 해결해서 다행입니다. ㅎ

    감사드려요~ ^^

    perm. |  mod/del. |  reply.
  12. 바닐라로맨스 2011.03.21 02:25 신고

    항상 많은 정보 얻어가고 있습니다!+_+ 근데... 저는 다음 애드박스와 구글 애드센스를 같이하고싶은데... 저의 블로그를 보시면 알겠지만 상당히 보기가 좀...;;;; 안좋네요;;;
    길이도 딱 맞지도않고... 그래서 구글애드센스위치를 살짝 아래로 내렸으면 좋겠는데... 그런것은 방법이 없나요?

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.03.21 02:44 신고

      글 읽어주셔서 감사합니다. (__)

      제 생각을 적어보자면 다음뷰애드광고는 클릭율로 수익이 올라가는건 아닙니다.

      구글은 클릭시 수익이 발생하죠. 구글을 2단으로 해서 본문 상단에 배치하는게 가장 이상적이라고 합니다. 1단도 아니고 3단도 아니고 좌우로 들어간 2단이 이상적이라는것이죠.

      근데 그 공간에 다음뷰광고를 넣어두면 두 광고 모두 좀 어색해져서 클릭도 안일어나서 구글광고 수익도 떨어지고 다음뷰광고 위치도 어정쩡해 질겁니다.

      개인적으로는 상단은 구글광고 2단으로 가시고 그 아래 자동으로 다음뷰애드 광고가 달리도록 해서 두는게 좋아보입니다. 물론 본문의 첫시작 글은 반으로 좁아지겠죠.하지만 그게 최선이라고 저는 생각합니다. 다음뷰애드광고가 사이드바로 빠지거나 하지 않는 이상에는 말이죠..

      perm. |  mod/del. | 
  13. 2011.03.21 09:38

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  14. 2011.03.21 13:37

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  15. 2011.03.21 16:16

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  16. 2011.03.22 23:21

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  17. 내부고발자 2011.10.11 18:07 신고

    그 동안 테이블 태그만 사용해 왔었는데 div 태그가 더 좋다고 해서 덕분에 변경했네요.
    감사합니다.:)

    perm. |  mod/del. |  reply.
  18. 센스코리아 2013.09.11 15:31 신고

    한국의 애드센스 게시자 여러분 ! 환영합니다 !

    센스코리아는 애드센스 초보자 부터, 고수까지 모두 함께 수익을 도모하는 구글 애드센스 포럼입니다.

    여러분의 많은 관심 부탁드립니다. 감사합니다.

    구글 애드센스 포럼 - 센스코리아 :x

    perm. |  mod/del. |  reply.
  19. 쭈꾸미 2014.06.18 13:38 신고

    안녕하세요

    반응형 웹과 반응형 광고에서는

    어떤식으로 본문상단에 배치하는게 좋을까요?

    :(

    perm. |  mod/del. |  reply.
    • 씨디맨 2014.06.18 13:58 신고

      http://getbootstrap.com/css/#tables

      반응형 웹이라면 광고 배치를 2단으로 놓고 줄였을 때 사이즈에 맞게 하나를 숨키거나 하는 방식으로 정리할 수 도 있구요. 또는 사이즈가 좁아지니 광고를 다른것을 띄우면 될듯합니다.

      Available classes

      Use a single or combination of the available classes for toggling content across viewport breakpoints.

      위 링크의 내용중 위 내용 부분을 보시면 됩니다.

      perm. |  mod/del. | 
  20. Cacka Roach 2015.08.20 19:37 신고

    동영상에 그프로그램 이름좀알려주세용 링크좀알려주세용!

    perm. |  mod/del. |  reply.
  21. Cacka Roach 2015.08.20 19:37 신고

    동영상에 그프로그램 이름좀알려주세용 링크좀알려주세용!

    perm. |  mod/del. |  reply.