구글 애드센스 티스토리 블로그에 설치하기

구글 애드센스를 가입해서 티스토리에 설치하기까지 블로그 초보에겐 정말 힘든 작업일 수 도 있다. 

특히나 html코드를 모른다면 더더욱 힘든 작업일 것이다. 나 또한 블로그 위치별 코드 삽입을 위해서 정말 수많은 블로그를 방문 했었다. 어떤곳은 단순 링크만 걸어두고 아무런 내용이 없는 블로그도 있었고, 어떤 블로그는 상세하게 설명은 되어있었으나 딱 한군데 설치에 대한 설명만 있어서 또다른 위치에 설치하기 위해서는 또다른 곳을 찾아 다녀야 했었다. 또 어떤 블로그는 길게 설명은 잘 해놓았는데 나 같은 초보에겐 설명이 너무 어렵게 되어있었다.

낚시를 배울려는 사람에게 자꾸 잡아놓은 물고기만 던져 주시는 불러그분들이 많았다. 하나를 얻고 나면 또다른 정보를 위해서는 다시 검색사이트를 돌아다녀야 하는 경우가 너무나도 많았다. 이 글을 읽는 분들도 아마 여기서 얻고자 하는 정보를 얻지 못하고 곧바로 떠날지도 모르겠다.

다만, 나는 가능하다면 이미 잡아 놓은 물고기를 주기 보다는 물고기 잡는 방법을 알려주고 싶다.^^:


초보자가 티스토리 블로그에 구글 애드센스(다른 광고도 마찬가지가 아닐까 생각한다 다만 아직 다른 광고를 달아본 적이 없어서 확신은 못하겠다)를 단다면 아마도 몇가지 위치에 한정되지 않을까 생각한다. 즉, 본문 글 상단과 본문글 하단, 그리고 사이드바, 마지막으로 카테고리 메뉴를 눌렀을때 출력되는 화면의 상단이 하단일 것이다.



1. 블로그 본문 글 상단 또는 하단에 설치하기

지난번 글에서 치환자에 대한 언급이 있었다. 본문치환자(본문치환자:[가##_article_rep_desc_##가.]) 위에다 코드를 삽입하면 본문상단에 설치하는 것이고 그 아래에 삽입하면 하단에 달게 되는 것이다. 너무 쉽지 않은가!!


아래 이미지는 이 블로그 본문글 상단에 설치된 모습이다.  이 글 상단에 있는 텍스트 광고 두개에 대한 설치 코드이다.  이렇게 설치 위치를 찾을 려면 skin.html 창 내부에 마우스를 아무데나 갖다놓은상태에서 Ctrl 키를 누른 상태에서 F키를 눌러주면 "찾기" 창이 뜨는데 거기에 위의 article을 찾으면 아마 쉽게 찾으리라 본다.

 
---아는 분들은 바로 아래 글은 생략해서 읽으면 된다.---

<br>테그는 광고 상단에 여백을 주기 위함이며, 그 아래의 <table.........로 시작하는 코드는 아래와 같이 두 칸으로 나우어 광고를 각각 배치시킨다음 가운데로 정렬시켜서 보기 좋게 나열하기 위함이다. 이 코드를 삽입하지 않아도 광고가 나란히 두개 실리는데는 문제 없다.

** <br>테그는 break의 약자라 생각하면 된다. 쉼이다. 한줄 쉬고 넘어간다는 의미
** <table>,,,테그는 아래처럼 표를 만드는 코드이다.
** width=100%는 테이블의 폭을 테이블이 들어가는 곳인 본문의 좌우폭을 100% 쓰겠다는 의미
** height=255는 제 블로그 상단에 있는 광고 높이가 250이라서 그냥 5정도 더 플러스했다. 
** 뒤에 붙는건 쓸데없이 넣은거다 없어도 무관하다.
**<TR></TR>는 아래로 한줄(한칸)이라는 의미한다.
**<TD></TD>는 옆으로 한줄(한칸)이라는 의미이다. 여기서 <TR></TR>하나 안에 <TD></TD>두개니깐
아래로 한줄짜리 옆으로 두칸짜리 표(테이블)가 되는 것이다.
**<TD align=center>는 좌우 칸 안에 들어가는 내용을 가운데 정렬시킨다는 의미

좌측광고

우측광고

본문글 치환자  위에 광고코드가 삽입되어있다. 아래에 삽입하면 본문글 하단에 광고가 보이게 된다.


2. 사이드바에 광고 삽입하기

티스토리 블로그에 코드를 애드센스 코드를 삽입 할때에는 해당 위치의 코드 앞 또는 뒤에 넣어 주면 되는데 사이드 바에서는 다르다.

사이드바에 넣기 위해서는 새로이 사이드바를 하나 만들어 주어야 한다. 티스토리의 skin.html 안에서 각각의 사이드 바는 모두 아래와 같은 코드 사이에 들어가 있다. 하지만 <s_......>와 </s_..............>사이에 비어 있는 코드는 찾아봐도 없을 것이다. 그렇다. 사이드바에 광고를 삽입 하기 위해서는 블로그의 다른 위치에 광고 삽입하는 것과는 달리 아래에 보이는 <s_......>와 </s_.........>코드를 새로이 만들어 주어야 한다.  </s_.siderbar_element>를 하나 찾아서 그 아래에 아래와 같이 새로이 만들어주고  그 코드 사이에 광고코드를 삽입하면 된다.

<s_sidebar_element>
사이드바(카테고리,달력,최근글보기,링크......등)  ←광고코드가 삽입되는 위치
</s_sidebar_element>

 

 
위에서 광고 아래위의 코드인

 <!-- start sidebar google adsense-->

<div align="center">와

</div>

<!-- end search adsense--> 

 는 넣지 않아도 되지만 주석(설명)처리된 <!--start....................-->는 넣어 주는 주는 것이 좋다. 물론 설명글은 마음대로 해도 된다. 나중에 주석안에 있는 단어들이 사이드바의 이름으로 변한다..

아무튼 저렇게 코드를 삽입하고서 저장한 뒤 관리자페이지에서  [스킨] >>[사이드바 설정]을 누르면 위에서 만든 사이드바가 생성되어 있는 것을 아래와 같이 확인 할 수 있으며 이 사이드바를 원하는 위치에 옮겨서 활성화 시키면 끝난다.

**주석안에 있던 "start sidebar google" 이 사이드바가 새로이 만들어지면서 사이드바 이름으로 변했다.



3. 카테고리 클릭시 출력되는 화면상단에 삽입하기

사이드바의 카테고리를 클릭하면 나오는 결과 페이지의 상단에 광고를 삽입하는 방법인데 실제 광고효과는 아주 미미하다고 볼수 있다. 왜냐면 클릭률이 아주 낮기 때문이다. 블로그에 글이 상당히 많이 쌓여있는 분들에겐 어느정도 광고 노출이 있을 수도 있겠지만 보잘것 없는 내 블로그 같은 곳엔 기대하기 힘든 위치다. 그래도 비워 두느니 삽입해두는 것이 나을 것이다^^:


아래는 이 블로그 우측 카테고리 중에서 "아이폰"을 클릭했을 때 나오는 페이지를 보여준다.

위와 같은 광고의 삽입 위치는 아래 이미지와 같이 [..##_list_cont_##]건</h3> 와 <ol> 사이에 광고 코드를 넣어 주면된다. <br>테그는 역시 광고의 아래와 위의 여백을 주는 것이고 <center></center>테그는 광고가 좌우폭의 가운데에 위치시키기 위함이다.

 설명을 하다보니 나도 모르게 많이 길어졌다. 역시 html 코드 같은 걸 글로 설명하는 것은 상당히 힘이 든다는 걸 느낀다. 아무튼 이 글을 읽는 분들께 많은 도움이 되었으면 좋겠다.
 
** 참고로 붉은 색으로 표시된 광고 코드는 절대 수정하면 안된다고 알고 있는데 간혹 저 코드의 일부를 수정해도 된다는 분들이 있는 것같다. 개인적으로는 수정하지 않는 것이 좋다고 본다. 한번은 검색용 애드센스를 달고서 검색창에 들어갈 수 있는 글자수를 구글계정에서 수정하지 않고 위에 보이는 티스토리 코드에서 수정을 했더니 아직까지도 검색용애드센스가 "신규"로 나온다. 그래서 그냥 "광고 숨기기"를 해둔 상태이다.

암튼 색상이나 폰트, 그리고 폰트크기 등 광고에 적용되는 옵션들은 애드센스 광고관리 페이지에서 하는 것이 좋을 것 같다.

역시 너무 어렵다!!!