블로그 광고 수익 모델-구글 애드센스 본문 상단 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 는 스타일에 해당합니다. 구조와 스타일을 분리하는 이유는 여러가지 장점이 있기 때문입니다. 반복되는 스타일을 정의를 해서 계속 반복해서 사용이 가능하며, 때문에 코드갯수를 줄일 수 있어서 페이지가 더 빠르게 뜨게 할 수 있습니다. 그리고 어느 누가 보더라도 쉽게 파악할 수 있습니다. 또한 스타일만 수정하여 같은 스타일이 적용된 부분을 한번에 모두 변경할 수 있습니다.

구글애드센스 관련 팁

구글 애드센스 공익광고를 대체 광고로 사용 설정하기
파이어버그로 티스토리 스킨 미리 수정하기
XHTML 웹표준 틀리기 쉬운 문법들
블로그 광고 시스템 써보고 느낀 점
티스토리 블로그 스킨 분석해보자 - 처음편