[티스토리 블로거 되기] 014. 구글 애드센스를 달아보자 - 블로그에 애드센스 넣기

안녕하세요, 운지(運指)입니다.^^

구글 애드센스를 다는걸로 3개의 포스팅을 쓸 줄은 몰랐습니다. 처음 생각했을 땐 2회 정도 나눠서 설명하면 충분할 줄 알았는데 얘기하다보니 길어졌네요. 뭐든 명확하고 간단하게 설명할 수 있어야하는데 저는 그게 안되요. 에휴..ㅜㅜ

오늘은 애드센스를 블로그에 넣어보도록 하겠습니다. 애드센스가 들어가는 위치는 아래와 같습니다. 제 블로그도 같은 위치에 달려있지요~ ^^

본문 윗쪽, 빨간 네모 박스로 표시한 자리에 구글 애드센스를 넣어보도록 하겠습니다

이전 인터페이스에서는, 애드센스 설정 -> 광고 관리 를 선택하시고
만들어둔 광고의 코드를 선택하시구요.

새 인터페이스에서는, 내광고 -> 코드 가져오기 를 선택하세요.

광고 코드를 복사하세요.

관리자 화면에서, 스킨 -> HTML/CSS 편집 을 선택하시구요.

skin.html 편집 창에서 article_rep_desc 부분을 찾습니다. Ctrl + F 로 찾으세요~^^

article_rep_desc 의 윗쪽 혹은 왼쪽에 광고 코드를 삽입하면 본문의 위에, 
아랫쪽 혹은 오른쪽에 코드를 넣으면 본문의 아래에 애드센스가 나타납니다.
여기서는 윗쪽에 넣었습니다. 다음에 삭제나 변경을 생각한다면,
<!-- 주석 --> 을 이용해서 광고 코드의 시작과 끝을 표시하는게 좋습니다.

article_rep_desc 의 왼쪽에 코드를 넣었더니 본문의 위에 애드센스가 삽입되었습니다.

article_rep_desc 의 오른쪽에 코드를 넣으면, 본문의 아래쪽에 애드센스가 나타납니다.

근데 애드센스를 윗쪽에 달 경우, 다음 view 애드와 나란히 달리질 않네요. view 애드가 아래로 튕겨져 버립니다. 이러면 보기 싫겠죠? 애드센스와 view 애드가 나란히 달리도록 해봅시다.

애드센스 코드를 <div> 태그로 감싸주시면 되는데요.

<div style = "margin : 15 0 10 0; float : left">

애드센스 코드

</div>

요렇게 해주시면 됩니다.

<div> 태그의 옵션인 margin 은 주위의 여백을 조절해주는 옵션인데요.

margin : 위쪽 오른쪽 아래쪽 왼쪽 ;

이렇게 여백을 표시하는거니, 미리보기로 보시면서 적당히 조절해주세요~ ^^

구글 애드센스 달기 끝~

덧. 나란히 다는거 모르겠다~! 그냥 더 쉽게 할 수 없나~! 하시는 분들은 아래 순서대로 해보세요.

 ① ##_article_rep_desc_## 윗쪽에 아래의 파란색 부분을 삽입합니다.

     <div style = "margin : 15 0 10 0; float : left">

     </div>

     ##_article_rep_desc_##

 ② 복사해놓은 애드센스 코드를 아래의 파란색 코드 사이에 붙여넣기 합니다.

     <div style = "margin : 15 0 10 0; float : left">

       애드센스 코드

     </div>

     ##_article_rep_desc_##

 ③ 저장을 누릅니다. ^^;