구글 애드센스(Ad Sense) 설치방법(1편) - 포스트 본문 상단 좌우 양쪽에 설치하기

구글 애드센스(Ad Sense) 설치방법 - 포스트 본문 상단 좌우 양쪽에 설치하기

다음 블로그를 돌아 네이버 블로그에 이르니 자꾸 티스토리 블로그가 손짓을 한다. 내가 가지지 못한 뭔가를 가지고 있는 듯 항상 자유롭고 깊이 있어 보였다. 정작 티스토리 블로그를 개설 하고서도 한참 후에 티스토리가 설치형 블로그라는 사실을 알았지만 그게 무슨 뜻인지도 모르고 포스팅 몇줄 올렸었다. 그래도 '메타블로그 보다는 한 수 위 같은 소위 1차 블로그인 다음블로그, 네이버 블로그에서 놀아 봤는데 티스토리도 그게 그거 아닌거 아닌가?' 하는 막연한 생각에 어렵사리 초대장 한장 받아  티스토리 블로그에 그렇게 입문했다.



네이버 애드포스트(AdPost) 처럼 구를 애드센스 광고도 신청해서 순서에 따라 보턴만 누르면 포스트 위나 아래 위치에 근사하게 설치될 줄 알았던 구글 애드센스 광고를 설치하는 줄 알았었다. 처음 블로그 포스트도 얼마 되지 않는데도 애드포스트 박스를 달은 블로그들이 참 보기가 좋았기 때문에 광고 박스 신청을 서너차례 해봤지만 번번이 낙방의 고배를 마시고 난 후 단 네이버 애드포스트 광고 박스였다. 광고박스를 단 후에도 클릭이 없어도 신이나서 글을 포스팅 했고, 시간 가는 줄 몰랐었다.



구글애드센스에 몇차례의 신청 끝에 애드센스 가입을 환영한다는 메일을 받고 가벼운 마음으로 내 티스토리 블로그에 애드센스 광고 달기를 시작해 보았다. 그렇게 며칠간을 애드센스 설치 작업으로 시간을 보내고 보니 티스토리 블로그에 애드센스 설치가 생각보다 간단하지 않았고, 여러 고수님들이 장착기를 탐독하고 답습한 결과 후에 가까스로 남들 블로그와 비슷한 모습을 흉내내기에 이르게 되었다. 


그러나 애드센스가 어렵사리 설치는 일단 되었으나 그 과정에서도 광고의 사이즈라든지 블로그 오른쪽의 사이드바의 넓이(Width)와 애드센스 사이드바의 넓이의 차이에서 오는 문제점 등이 많아 내심 쉽지 않게 구글광고를 달게 되었고, 이러한 경험을 새롭게 구글 광고를 블로그에 설치하고자 하시는 분들께 알려 드리고 싶은 마음에서 아래와 같이 포스팅을 하게 되었다. 



☞ 티스토리 블로그에 구글 애드센스 광고를 설치하기 전에 유의할 점

1. 선택하시는 블로그 스킨에 따라서  등장하는 용어와 설치방법에 차이가 있습니다.       (스킨에 따라 조금씩 또는 아주 상이하게 설치하는 위치가 다를 수 있습니다.)  2. 구글 애드센스 광고의 사이즈나 티스토리 사이드바의 사이즈는 서로 다르니 이를      잘 이해하시고 설정을 해주셔야  합니다.  3. 구글 애드센스에서 발급받은 '광고코드'를 복사 후 이를 설치하고자 하는 블로그의      정해진 위치에 붙여넣기를 하셔야 합니다.

구글 애드센스(Ad Sense) 설치방법(1편) - 포스트 상단 좌우 양쪽에 설치하기

 본 1편 애드센스 광고 설치방법에서는 위에서 보시는 것처럼 포스트 본문 상단에좌, 우 양쪽에 구글 애드센스가 노출되도록 설치하는 방법에 대해서 말씀 드리고자 합니다. 물론 블로그 본문 상단 양쪽에 광고를 많이 노출킨다고 해도 집중효과가 없어서 오히려 광고효과는 저하되고 클릭률은 낮아지거나 높은 클릭효과를 기대할 수 없다는 점을 사전에 말씀 드립니다.


구글 애드센스에 로그인을 한 후 상단 메뉴바의 애드센스 설정 / 광고관리 / 컨텐츠용 애드센스를 순서대로 클릭합니다. 검색용 광고,  피드용 광고에 대해선 차후에 시리즈로 나누어 설명 드리도록 하겠습니다.
콘텐츠용 애드센스 설정시에는 가장 무난하게 설치할 수 있는 광고 노출 사이즈인 300*250의 중간 직사각형 광고형식을 기준으로 설치해 보실 것을 권장합니다. 왜냐하면 차후 숙련이 되시면 마음대로 관리센터의 skin.html 모드에서 다양한 광고형태로 설정과 수정이 가능할 것이지만 처음 설치하실 때는 300*250 사이즈가 가장 무난한 사이즈라고 여겨지기 때문입니다.

또한 색상등은 모두 기본팔레트를 따라 수정하지 않고 구글애드센스에서 최초 설정된 그대로 적용하는 것으로 합니다.
콘텐츠용 애드센스를 기본팔레트로 색상을 설정하고 300*250 사이즈로 선택 작성하신 후 "제출 및 코드제출" 보턴을 누릅니다.



   

애드센스 단위코드가 위의 그림처럼 생성되는데. 개인정보 보호를 위한 보안상 살짝 지운 윗 부분의 'pu212~~~' 라고 표시된 코드는 구글계정 신청 메일 1개당 1개만 부여되는 고유의 광고자격확인 아이디 정도라고 보시면 되는 아이디입니다. 아랫부분의 숫자로만 표시된 부분을 지웠는데 이것이 앞에서 광고코드 제출로 생성된 '광고단위 코드'는 것입니다. 처음 만드는 것이니 편의상 이 광고단위 코드는 '포스트 본문 상단 좌측용'이라고 생각하시면 되겠습니다. 여기까지 구글 애드센스 광고단위 생성과정을 끝내신 것이구요....위에 생성된 광고단위 코드를 모두 복사하셔서 다음 단계인 티스토리블로그 관리페이지의 skin.html페이지로 이동하셔야 합니다.

 

관리자 / 스킨 / HTML/CSS편집 모드로 들어가서 위에 생성된 광고단위 코드를 HTML / CSS 편집 모드 중  skin.html 모드로 들어갑니다. 그리고 아래의 CSS모드는 이 단계에서는 손댈 일이 없으니 안심하시기 바랍니다.


 
skin.html 모드에서 [##   aricle rep desc ##] 이라고 쓴 부분을 찿습니다. 윗 그림에서 보시면 중간부분에 청색으로 표시한 부분입니다. 이 [##   aricle rep desc ##] 표시가 일종의 기준점 역할을 하는데, 이 표시 위에 아까 복사해 두었던 광고단위 코드를 붙여넣기하면 블로그 포스트 상단부분에 광고가 노출되고, 바로 밑에 붙여 넣기를 하면 포스트 하단 부분에 구글광고 단위가 노출되는 것입니다.

사이드바를 내려서 중간 부분 정도에 위치 하는데 처음엔 찾기가 쉽질 않으니 메모장을 이용하셔서 "article"이란 단어를 찿기 기능을 이용해서 찾아야 합니다. 메모장을 찾는 방법은 컴퓨터 좌측하단의 시작 / 프로그램 / 보조프로그램 /메모장 순서대로 커서를 옮겨가시면 되는데 아래의 그림으로 나타내 보았습니다.


 

 

위의 그림처럼 우측 하단에 있는 기준점 역할의 [##   aricle rep desc ##]
위에 구글 애드센스에서 생성시킨 두개의 광고단위 코드를 보가 후 붙여넣기를 한 결과입니다.




애드센스의 광고단위 두개를 위아래 연속해서 붙여넣기를 하면 한개 광고 단위당 4개씩 8개의 광고가 세로로 노출이 되므로 이를 좌우로 배치하기 위해서 박스형태를 취해야 하는데,
그림에서는 흐리게 나오므로 이를 실제로 복사해서 아래처럼 붙여 보도록하겠습니다.

</s_ad_div>         <div class="article"> <!--상단 구글광고 텍스트(좌) (우) --> <table id="adsense_c" border=0 width=732 cellpadding=0 cellspacing=0> <tr> <td width=336 aligh=left> <script type="text/javascript"><!-- google_ad_client = "pub-212001234567890"; /* 300x250, 작성됨 10. 9. 19 */ google_ad_slot = "1234567890"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> <td width=336 valing=top aligh=left> <script type="text/javascript"><!-- google_ad_client = "pub-2212001234567890"; /* 300x250, 작성됨 10. 9. 21 */ google_ad_slot = "1234567890"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> </tr></table> <!--상단 구글광고 텍스트(좌) (우) 끝-->           구글 애드센스(Ad Sense) 설치방법 - 포스트 본문 상단 좌우 양쪽에 설치하기 다음 블로그를 돌아 네이버 블로그에 이르니 자꾸 티스토리 블로그가 손짓을 한다. 내가 가지지 못한 뭔가를 가지고 있는 듯 항상 자유롭고 깊이 있어 보였다. 정작 티스토리 블로그를 개설 하고서도 한참 후에 티스토리가 설치형 블로그라는 사실을 알았지만 그게 무슨 뜻인지도 모르고 포스팅 몇줄 올렸었다. 그래도 '메타블로그 보다는 한 수 위 같은 소위 1차 블로그인 다음블로그, 네이버 블로그에서 놀아 봤는데 티스토리도 그게 그거 아닌거 아닌가?' 하는 막연한 생각에 어렵사리 초대장 한장 받아  티스토리 블로그에 그렇게 입문했다. 네이버 애드포스트(AdPost) 처럼 구를 애드센스 광고도 신청해서 순서에 따라 보턴만 누르면 포스트 위나 아래 위치에 근사하게 설치될 줄 알았던 구글 애드센스 광고를 설치하는 줄 알았었다. 처음 블로그 포스트도 얼마 되지 않는데도 애드포스트 박스를 달은 블로그들이 참 보기가 좋았기 때문에 광고 박스 신청을 서너차례 해봤지만 번번이 낙방의 고배를 마시고 난 후 단 네이버 애드포스트 광고 박스였다. 광고박스를 단 후에도 클릭이 없어도 신이나서 글을 포스팅 했고, 시간 가는 줄 몰랐었다. 구글애드센스에 몇차례의 신청 끝에 애드센스 가입을 환영한다는 메일을 받고 가벼운 마음으로 내 티스토리 블로그에 애드센스 광고 달기를 시작해 보았다. 그렇게 며칠간을 애드센스 설치 작업으로 시간을 보내고 보니 티스토리 블로그에 애드센스 설치가 생각보다 간단하지 않았고, 여러 고수님들이 장착기를 탐독하고 답습한 결과 후에 가까스로 남들 블로그와 비슷한 모습을 흉내내기에 이르게 되었다.  그러나 애드센스가 어렵사리 설치는 일단 되었으나 그 과정에서도 광고의 사이즈라든지 블로그 오른쪽의 사이드바의 넓이(Width)와 애드센스 사이드바의 넓이의 차이에서 오는 문제점 등이 많아 내심 쉽지 않게 구글광고를 달게 되었고, 이러한 경험을 새롭게 구글 광고를 블로그에 설치하고자 하시는 분들께 알려 드리고 싶은 마음에서 아래와 같이 포스팅을 하게 되었다.  ☞ 티스토리 블로그에 구글 애드센스 광고를 설치하기 전에 유의할 점  1. 선택하시는 블로그 스킨에 따라서  등장하는 용어와 설치방법에 차이가 있습니다.       (스킨에 따라 조금씩 또는 아주 상이하게 설치하는 위치가 다를 수 있습니다.)  2. 구글 애드센스 광고의 사이즈나 티스토리 사이드바의 사이즈는 서로 다르니 이를      잘 이해하시고 설정을 해주셔야  합니다.  3. 구글 애드센스에서 발급받은 '광고코드'를 복사 후 이를 설치하고자 하는 블로그의      정해진 위치에 붙여넣기를 하셔야 합니다. 구글 애드센스(Ad Sense) 설치방법(1편) - 포스트 상단 좌우 양쪽에 설치하기  본 1편 애드센스 광고 설치방법에서는 위에서 보시는 것처럼 포스트 본문 상단에좌, 우 양쪽에 구글 애드센스가 노출되도록 설치하는 방법에 대해서 말씀 드리고자 합니다. 물론 블로그 본문 상단 양쪽에 광고를 많이 노출킨다고 해도 집중효과가 없어서 오히려 광고효과는 저하되고 클릭률은 낮아지거나 높은 클릭효과를 기대할 수 없다는 점을 사전에 말씀 드립니다. 구글 애드센스에 로그인을 한 후 상단 메뉴바의 애드센스 설정 / 광고관리 / 컨텐츠용 애드센스를 순서대로 클릭합니다. 검색용 광고,  피드용 광고에 대해선 차후에 시리즈로 나누어 설명 드리도록 하겠습니다. 콘텐츠용 애드센스 설정시에는 가장 무난하게 설치할 수 있는 광고 노출 사이즈인 300*250의 중간 직사각형 광고형식을 기준으로 설치해 보실 것을 권장합니다. 왜냐하면 차후 숙련이 되시면 마음대로 관리센터의 skin.html 모드에서 다양한 광고형태로 설정과 수정이 가능할 것이지만 처음 설치하실 때는 300*250 사이즈가 가장 무난한 사이즈라고 여겨지기 때문입니다. 또한 색상등은 모두 기본팔레트를 따라 수정하지 않고 구글애드센스에서 최초 설정된 그대로 적용하는 것으로 합니다. 콘텐츠용 애드센스를 기본팔레트로 색상을 설정하고 300*250 사이즈로 선택 작성하신 후 "제출 및 코드제출" 보턴을 누릅니다.     애드센스 단위코드가 위의 그림처럼 생성되는데. 개인정보 보호를 위한 보안상 살짝 지운 윗 부분의 'pu212~~~' 라고 표시된 코드는 구글계정 신청 메일 1개당 1개만 부여되는 고유의 광고자격확인 아이디 정도라고 보시면 되는 아이디입니다. 아랫부분의 숫자로만 표시된 부분을 지웠는데 이것이 앞에서 광고코드 제출로 생성된 '광고단위 코드'는 것입니다. 처음 만드는 것이니 편의상 이 광고단위 코드는 '포스트 본문 상단 좌측용'이라고 생각하시면 되겠습니다. 여기까지 구글 애드센스 광고단위 생성과정을 끝내신 것이구요....위에 생성된 광고단위 코드를 모두 복사하셔서 다음 단계인 티스토리블로그 관리페이지의 skin.html페이지로 이동하셔야 합니다.   관리자 / 스킨 / HTML/CSS편집 모드로 들어가서 위에 생성된 광고단위 코드를 HTML / CSS 편집 모드 중  skin.html 모드로 들어갑니다. 그리고 아래의 CSS모드는 이 단계에서는 손댈 일이 없으니 안심하시기 바랍니다.   skin.html 모드에서 [##   aricle rep desc ##] 이라고 쓴 부분을 찿습니다. 윗 그림에서 보시면 중간부분에 청색으로 표시한 부분입니다. 이 [##   aricle rep desc ##] 표시가 일종의 기준점 역할을 하는데, 이 표시 위에 아까 복사해 두었던 광고단위 코드를 붙여넣기하면 블로그 포스트 상단부분에 광고가 노출되고, 바로 밑에 붙여 넣기를 하면 포스트 하단 부분에 구글광고 단위가 노출되는 것입니다. 사이드바를 내려서 중간 부분 정도에 위치 하는데 처음엔 찾기가 쉽질 않으니 메모장을 이용하셔서 "article"이란 단어를 찿기 기능을 이용해서 찾아야 합니다. 메모장을 찾는 방법은 컴퓨터 좌측하단의 시작 / 프로그램 / 보조프로그램 /메모장 순서대로 커서를 옮겨가시면 되는데 아래의 그림으로 나타내 보았습니다.     위의 그림처럼 우측 하단에 있는 기준점 역할의 [##   aricle rep desc ##] 위에 구글 애드센스에서 생성시킨 두개의 광고단위 코드를 보가 후 붙여넣기를 한 결과입니다. 애드센스의 광고단위 두개를 위아래 연속해서 붙여넣기를 하면 한개 광고 단위당 4개씩 8개의 광고가 세로로 노출이 되므로 이를 좌우로 배치하기 위해서 박스형태를 취해야 하는데, 그림에서는 흐리게 나오므로 이를 실제로 복사해서 아래처럼 붙여 보도록하겠습니다.  </s_ad_div>         <div class="article"> <!--상단 구글광고 텍스트(좌) (우) --> <table id="adsense_c" border=0 width=732 cellpadding=0 cellspacing=0> <tr> <td width=336 aligh=left> <script type="text/javascript"><!-- google_ad_client = "pub-212001234567890"; /* 300x250, 작성됨 10. 9. 19 */ google_ad_slot = "1234567890"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> <td width=336 valing=top aligh=left> <script type="text/javascript"><!-- google_ad_client = "pub-2212001234567890"; /* 300x250, 작성됨 10. 9. 21 */ google_ad_slot = "1234567890"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> </tr></table> <!--상단 구글광고 텍스트(좌) (우) 끝-->             [HTML 용어 & 소스 설명] <!--상단 구글광고 텍스트(좌) (우) --> : 이 문구는 '주석'이란 것으로서 넣으셔도 되고 않넣으셔도 되지만 차후 쉽게 찾기 위해서 그대로 복사해서 사용하시기 바랍니다. <table id="adsense_c" border=0 width=732 cellpadding=0 cellspacing=0> <tr> <td width=300 aligh=left> </td> </tr></table> 양옆으로 가로 넓이(Width) 732짜리 테이블(일종의 박스)을 만든다는 뜻이며, 이 안에 왼쪽으로 정렬되는 300짜리 박스가 들어 간다는 뜻입니다. WIDTH가 732니까 가로 넓이 300짜리인 광고박스 2개가 충분히 들어갈 수 있겠죠? 그런데 600미면 충분히 들어가는데 732로 한 이유는 뭘까요? 네, 그것은 구글 애드센트 광고단위 크기가 가로 넓이(Width)336짜리도 있기 때문에 최대한 큼직한 테이블을 미리 만들어 둔 것입니다. 나중에 큰 사이즈의 광고단위를 링크시키고자 하실 경우에 Wiidth336*250 짜리 광고빅스 2개를 설치하셔도 무방합니다.  <TR><TD>처럼  "/"표시가 없는 것은 테이블이나 도표를 시작하겠다는 뜻이 있고, </td></TR>처럼 "/"표시가 붙은 것은 작은도표</td>, 큰테이블</tr>을 끝낸다는 뜻을 가지고 있습니다. 즉, 여기서는 가로 600짜리 테이블(큰박스)에 가로 300짜리 작은박스를 시작하고  끝내겠다는 뜻입니다. 그런데 300짜리가 두개가 들어가도록 되어 있으니 600짜리 넓이를 가진 테이블이 되는게 맞겠죠? 글을 마치면서... 쉬운 걸 어렵게 말씀드린거 같네요. 어려워하지 마시고 몇번 보시면 이해되실 것이니 포기하지 마시고 설치를 성공적으로 마쳐보시기 바랍니다. 몇번 하시다 보면 이쁘고 맏음직한 티스토리 블로그에 멋진 구글 애드센스 광고가 노출되게 될 것입니다. 다음 2편에서는 포스트 하단에 광고달기, 사이드바에 광고링크단위 달기, 구글 검색엔진 설치하는 방법에 대해 말씀드리겠습니다. 도움이 되셨으면 좋겠습니다.qsWsWw6J+tKCYxUnikt3/A==

 

[HTML 용어 & 소스 설명]

<!--상단 구글광고 텍스트(좌) (우) -->
: 이 문구는 '주석'이란 것으로서 넣으셔도 되고 않넣으셔도 되지만 차후 쉽게 찾기 위해서 그대로 복사해서 사용하시기 바랍니다.


<table id="adsense_c" border=0 width=732 cellpadding=0 cellspacing=0>
<tr>
<td width=300 aligh=left>

</td>
</tr></table>

양옆으로 가로 넓이(Width) 732짜리 테이블(일종의 박스)을 만든다는 뜻이며, 이 안에 왼쪽으로 정렬되는 300짜리 박스가 들어 간다는 뜻입니다. WIDTH가 732니까 가로 넓이 300짜리인 광고박스 2개가 충분히 들어갈 수 있겠죠? 그런데 600미면 충분히 들어가는데 732로 한 이유는 뭘까요? 네, 그것은 구글 애드센트 광고단위 크기가 가로 넓이(Width)336짜리도 있기 때문에 최대한 큼직한 테이블을 미리 만들어 둔 것입니다. 나중에 큰 사이즈의 광고단위를 링크시키고자 하실 경우에 Wiidth336*250 짜리 광고빅스 2개를 설치하셔도 무방합니다. 


<TR><TD>처럼  "/"표시가 없는 것은 테이블이나 도표를 시작하겠다는 뜻이 있고, </td></TR>처럼 "/"표시가 붙은 것은 작은도표</td>, 큰테이블</tr>을 끝낸다는 뜻을 가지고 있습니다. 즉, 여기서는 가로 600짜리 테이블(큰박스)에 가로 300짜리 작은박스를 시작하고  끝내겠다는 뜻입니다.

그런데 300짜리가 두개가 들어가도록 되어 있으니 600짜리 넓이를 가진 테이블이 되는게 맞겠죠?

글을 마치면서...
쉬운 걸 어렵게 말씀드린거 같네요. 어려워하지 마시고 몇번 보시면 이해되실 것이니 포기하지 마시고 설치를 성공적으로 마쳐보시기 바랍니다. 몇번 하시다 보면 이쁘고 맏음직한 티스토리 블로그에 멋진 구글 애드센스 광고가 노출되게 될 것입니다.

다음 2편에서는 포스트 하단에 광고달기, 사이드바에 광고링크단위 달기, 구글 검색엔진 설치하는 방법에 대해 말씀드리겠습니다. 도움이 되셨으면 좋겠습니다.qsWsWw6J+tKCYxUnikt3/A==