티스토리에 구글애드센스 광고코드 만들기 및 삽입하기

구글 애드센스 광고를 티스토리 블로그에 삽입하는 방법에 대해 설명하겠습니다.
먼저 애드센스 광고 만드는 방법은 (콘텐츠용 애드센스 광고 만들기) 를 참조하세요


● skin.html 에 대하여 알아야 할 사항

사용자 삽입 이미지

악발이 새, 겁먹은 강아지

코드 삽입하는 방법을 바로 보기 위해서는 이 부분은 건너뛰면 됩니다.

구글 애드센스 코드를 본인의 티스토리 블로그에 삽입하여 구글애드센스 광고가 노출이 되도록 하기 위해서는 티스토리의 스킨에 삽입을 해야 한다.

티스토리 블로그의 스킨 변경은 기본적으로 스킨 위자드를 이용하여 쉽게 바꿀 수 있지만 좀더 세부적인 스킨 변경(소스수정)은 html/css를 수정하는 방법으로 가능하다.

스킨(skin.html) 편집은 관리자페이지의 "스킨"을 누른후 "HTML/CSS 편집"을 누르면 소스수정이 가능하다.

skin.html (소스)의 구성

html/css 편집을 누르면 skin.html의 내용이 화면에 표시가 된다. skin.html의 내용은 티스토리 블로그의 구성, 내용등을 화면에 표시시키는데 필요한 모든 내용이 있으며 그 구성은 대부분 <div></div>와 <span></span>, 치환자( '[##'으로 시작 )로 구성이 되어 있다.

소스의 수정은 잘못되는 경우 블로그의 모양이 이상하거나 오류가 날 수도 있고, 특정 내용이 표시되지 않을 수도 있으므로 위의 구성요소에 대해서 다 알아야겠지만 여기서 코드삽입만을 위해서는 먼저 치환자에 대해서 알아야 한다. 왜냐하면 구글애드센스의 자바스크립트 코드를 삽입하기 위한 위치를 치환자로 찾기 때문이다.

본문관련 치환자 중 일부

[##^_article_rep_link_^##] : 블로그 글의 고유 주소
[##^_article_rep_title_^##] : 블로그 제목
[##^_article_rep_category_link_^##] : 카테고리 링크
[##^_article_rep_category_^##] : 카테고리 명
[##^_article_rep_date_^##] : 글쓴 날짜
[##^_article_rep_desc_^##] : 블로그 본문내용
[##^_paging_rep_link_^##] : 페이지 링크

※ 위의 치환자중 ^ 을 제외한것이 실제 치환자입니다. 그냥 사용하는 경우 화면에 보이지 않아서 ^을 넣었습니다.

위의 치환자에서 article_rep_desc 가 블로그 포스트 내용이다.

● 구글애드센스 광고코드 삽입하기

먼저 블로그에 삽입할 광고 위치를 정해야 한다. 보통의 경우는 본문의 상단이나 하단에  삽입을 하는데 상단에 배치하는 것이 클릭율이 높다는 평이다.

블로그 글 상단에 구글애드센스 광고를 넣기 위해서는 article_rep_desc 의 윗부분에 삽입을 하면 되고 하단에 넣기 위해서는 article_rep_desc 아래에 넣으면 된다.

1) 구글애드센스 광고코드를 넣기 위해서 관리자페이지의 스킨>html/css를 클릭한다.

2) 찾기(편집-찾기 또는 Ctrl + F)를 이용하여 article_rep_desc 을 찾아서 아래와 같이 [##^_article_rep_desc_^##] 위에 구글애드센스 홈페이지에서 복사해온 코드를 붙여넣기 한다.

< 구글애드센스 코드 삽입전 >

<div class="article_post">
     이곳에 구글애드센스 코드를 복사하여 붙여넣는다.
      [##^_article_rep_desc_^##]
</div>

< 구글애드센스 코드 삽입후 >

<div class="article_post">
    <script type="text/javascript"><!--
     google_ad_client = "pub-345346####51516";
     /* 본문상단_300x250(08. 4. 14) */
     google_ad_slot = "9111###7300";
     google_ad_width = 300;
     google_ad_height = 250;
      //-->
     </script>
     <script type="text/javascript"
       src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
     </script>

     <div><br></div>  ==> 한줄 띄우기(필요한 분은 직접입력해야 함)
      [##^_article_rep_desc_^##]
 </div>

※ 위의 google_ad_client와 google_ad_slot는 각각의 개인마다 다르며 개인식별코드이므로 히든처리(###) 하였습니다.

3) 위에서 보라색으로 된 "<div><br></div>" 부분은 광고와 본문이 너무 붙기 때문에 띄워주기 위한것으로 필요한사람은 직접입력해줘야 한다.

4) 이제 "미리보기"를 눌러서 정상적으로 나온다면 "저장"을 하면 된다.

첨언.
반드시 미리보기에서 전체적으로 살펴서 다른 구성요소들이 이상없이 나오는지 확인하고 저장을 하기 바랍니다.
별 문제는 없겠지만.. html에 대해서 잘 모르는 분은 광고코드를 삽입전에 소스를 복사해서 별도의 파일에 저장하여 백업(보관)해두는 방법도 괜찮습니다.

그럼 즐블하세요~~~

애드센스팁 관련글. 
- 블로그에 검색용 애드센스 달기 1
- 블로그에 검색용 애드센스 달기 2 (코드삽입)
- 내 블로그에 검색용 애드센스 검색결과 표시하기
- 한화면에 글 한개만 표시하기
- 애드센스 광고 가로로 2개 배치하기
- 애드센스광고 세로로 표시되는 문제

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon 안대근 2009.03.30 14:51 신고  댓글주소  수정/삭제  댓글쓰기

    너무 유용한 정보 감사합니다 잘 보고 갑니당

  3. BlogIcon 페키엄마 2009.05.30 03:56 신고  댓글주소  수정/삭제  댓글쓰기

    오늘 첨 애드센스 달았는데 넘 어려워 몇시간을 헤마다 님 정보땜에 잘 해결한것 같아요.매번 들러서 좋은 정보 얻고 갑니다 감사해요

    • BlogIcon Kay~ 2009.05.30 10:03 신고  댓글주소  수정/삭제

      아 그러시군요!.
      처음단계가 조금 어렵죠?
      안되는것 ,, 모르시는것 댓글로 물어보세요!
      아는것만 대답해드릴꼐요! ㅋㅋ

  4. 2009.06.04 17:05  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. BlogIcon 예슈리 2009.07.21 20:31 신고  댓글주소  수정/삭제  댓글쓰기

    오늘 몇번 들락거렸네요. 하다 안되서 ....^^;
    뭐 결국 해 놓고 봐도 제껀 별 멋도 없지만 그래도 성공했다는데 의의를 두고 오늘은 요기까지.ㅋㅋ
    그래도 여기가 초보가 어째 해보기엔 젤로 좋아요.
    항상 도움 많이 받고 있습니다~ ^^

    • BlogIcon Kay~ 2009.07.21 21:11 신고  댓글주소  수정/삭제

      아 그러시군요!..
      그럼요. 성공을 하면 이 다음에 더욱 멋진모습으로 진화할것입니다. ㅎㅎ
      자주 놀러오시고 댓글도 많이 달아주실거죠? ^^

  6. BlogIcon 또웃음 2009.08.26 17:18 신고  댓글주소  수정/삭제  댓글쓰기

    '카테고리의 다른 글' 아래 있는 한 줄로 된 구글 광고는 어떻게 넣는 건가요?
    항상 도움받고 있습니다. 감사합니다.
    참, 제 블로그에 알려주신대로 구글 검색창을 달았는데요.
    블로그 상단 메뉴 끝에 원래 스킨용인 검색창이 있어요.
    이걸 없애려면 어떻게 해야할까요?
    그 자리에 구글 검색창을 넣는 방법은 없을까요?
    지금 넣은 자리는 눈에 안 띄어서요.
    항상 도움주셔서 감사합니다.

    • BlogIcon Kay~ 2009.08.27 10:07 신고  댓글주소  수정/삭제

      기존검색창을 감추기 위해서는
      http://ccoma.tistory.com/278 에 보시면
      주석처리 하는 부분이 있습니다.

      그리고 카테고리 다른글 아래 한줄광고는 http://chobo1.tistory.com 에 조만간 올려놓도록 하겠습니다.

    • BlogIcon 또웃음 2009.08.27 16:35 신고  댓글주소  수정/삭제

      해보았는데요. 검색창은 없어지는데 문제는 home local tag media guestbook에 있는 막대의 두께가 1/3로 줄어듭니다. 초보라 Kay~님이 기록해 놓으신대로 열심히 따라하긴 했는데 왜 안 되는지 원인을 모르겠네요. ^^;;; 죄송합니다. T.T

    • BlogIcon Kay~ 2009.08.27 18:15 신고  댓글주소  수정/삭제

      <div class="search"><input type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){} }"/>
      </div>

      위 부분을 아래와 같이 해보세요!

      <div class="search">
      <!--
      <input type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){} }"/>
      -->
      </div>

    • BlogIcon 또웃음 2009.08.28 16:07 신고  댓글주소  수정/삭제

      네, 그렇게 해보았는데 검색창이 없어지긴 하는데 막대도 역시 같이 줄어들어요.

    • BlogIcon Kay~ 2009.08.31 00:39 신고  댓글주소  수정/삭제

      한줄광고는 http://chobo1.tistory.com/54 에 방법을 올려 두었습니다.

  7. BlogIcon kimyonce@gmail.com 2009.10.12 14:42  댓글주소  수정/삭제  댓글쓰기

    배너용 광고창을 두개 연속으로 붙이려면 어떻게 해야하나요? ㅠ_ㅠ 아 어려워 흑흑.....

    • BlogIcon Kay~ 2009.10.13 11:32 신고  댓글주소  수정/삭제

      ^^ 첨에 이것 저것 하고 싶은것..
      해야할게 많아서 힘드시죠? ^^
      가로로 2개 배치하는 방법은 http://chobo1.tistory.com/45 을 참고하세요!

  8. BlogIcon 팡랑 2009.10.13 10:36 신고  댓글주소  수정/삭제  댓글쓰기

    구글애드센스 에대한정보 감사히보고 있습니다 그런데 위에처럼 했는데
    님처럼 구글광고가 위에 두개 씩있는데요 저는 위 아래 1개씩은되는데요
    한개옆에구글 2개를 넣는법좀 알려주세요

  9. BlogIcon 백전백승 2010.02.18 13:59 신고  댓글주소  수정/삭제  댓글쓰기

    구글코드를 위 글에서 삽입해야 한다는 것을 알았습니다. 이 글을 읽기 전에 <body>무작정삽입했는데 엉터리로 나오더군요. 네이버 블로그에서 얼마전에 넘어왔으니 그냥 애드센스코드를 삽입하는 법법 정도는 알아야 될 것 같아서요.

  10. 2010.02.22 16:08  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  11. 2010.04.15 00:54  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon Kay~ 2010.04.15 19:34 신고  댓글주소  수정/삭제

      일단 광고 코드에는 문제가 없어 보이네요!
      광고가 전혀 안나온다는 말씀인가요?
      그리고 현재 블로그에는 적용이 된 상태인가요?
      오랫동안 사용을 안해서 계정을 중지한다는 얘기는 못들었거든요.
      일단 해당 코드는 이상이 없어보이므로 skin.html에 다시 한번 적용을 해보세요!

    • BlogIcon zippo3 2010.04.23 10:52 신고  댓글주소  수정/삭제

      관심에 감사...^^ 이제 어느정도 내 의지는 반영이 되는 듯합니다. 서서히.....
      감사합니다.

  12. BlogIcon 행복맘의 세상여행 2010.05.25 15:46 신고  댓글주소  수정/삭제  댓글쓰기

    아싸~~~~저 했어요~~ 구글애드센스....오늘 연락이 왔거든요...^^너무 기뻐요~~

  13. BlogIcon 여행리뷰 2010.06.25 19:23  댓글주소  수정/삭제  댓글쓰기

    드디어 구글애드센스 설치하는데 성공했습니다.
    케이님 글을 따라하다보니 차례대로 하게 되는군요.
    감사합니다.
    이제 부지런히 포스팅해야겠습니다^^

  14. 2010.08.30 23:44  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  15. BlogIcon 니들우먼 2010.10.30 22:09 신고  댓글주소  수정/삭제  댓글쓰기

    저같은 초보가 적용하기 쉽게 설명이 잘되어 있어서 정말 감사합니다.
    잘 적용하겠습니다.^^

  16. BlogIcon -™ 2010.12.16 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    으아.... 혼자서 하다가 머리털이 다 뽑히는 느낌이 들어 질문합니다!
    케이님의 블로그를 롤모델로 블로깅을 시작한지 어언 한달!..
    이제 고정인원도 몇명 생긴듯하여 광고를 달려고하는데..
    아래쪽 카태고리의 다른글 옆에 광고를 달으셧는에 어찌 하셧나요 ㅠㅠ
    저의 얇팍한 지식으로는 도저히 모르겟습니다! 은총을 내려주옵서소 ㅠㅠ

  17. BlogIcon 꼬양☆ 2011.10.24 15:44 신고  댓글주소  수정/삭제  댓글쓰기

    애드센스 신청 후 한번 반려(?)되고 두번만에 승인이 났어요
    그런데 도대체 이걸 어찌 담아와야 하는지... 에드센스에서 제공하는 정보를 봐도
    도저히 알아 들을수가 없더라구요..

    그러던 중 블로그를 발견했네요..ㅠㅠ

    아~ 복 받으실 꺼예요^^

  18. BlogIcon 닻별이 2012.06.19 08:50 신고  댓글주소  수정/삭제  댓글쓰기

    애드센스와 다음뷰를 나란히 달았을 때 본문에 칸 띄우기는 어떻게 해야하나요?
    코드 끝에 <div><br></div>
    [##^_article_rep_desc_^##]
    </div> 를 입력했는데도 광고와 본문 사이에 여백이 없습니다.