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

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

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

● 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개 배치하기
- 애드센스광고 세로로 표시되는 문제