본문 바로가기

━ Adsens Story

--- 티스토리 본문에 애드센스 광고 달기 - 2.본문에 삽입하기 ---

- 기본적인 지식 이외에 검색 및 여러 자문에 의해 작성된 글이므로 두서가 전혀 없음을 미리 밝혀 드립니다^^;
가장 기초적으로 또한, 되도록이면 초보자 분들도 바로 따라 할수 있도록 작성 하였으므로 어렵다고 생각 되시면
언제든지 리플을 부탁 드립니다.

2. 이제 코드를 삽입할 시간이다!

본문 코드 삽입은 그리 어렵지 않습니다 몇가지만 이해하고 넘어 가거나 혹은 이해 되지 않으시더라도
보시고 천천히 따라하면 누구나 쉽게 코드를 삽입할수 있습니다.


사용자 삽입 이미지


코드를 삽입 하기 위해서는 위에처럼 스킨->HTML/CSS 편집 으로 들어 가셔야 합니다
HTML/CSS 편집으로 들어가셔서 처음 보는 화면에 기죽지 마세요!
HTML/CSS 편집에 대해 간단히 설명 드리자면 이곳은 블로그의 스킨을 손수! 코드를 이용하여
수정할수 있는 공간입니다
이해만 하신다면 스킨위자드와는 비교도 안될 정도로 멋진 블로그를 꾸미실수 있습니다^^
다음에 기회가 된다면 HTML/CSS 편집에 대해 알아 보도록 하고 바로 본론으로 들어 가겠습니다


사용자 삽입 이미지


저 길고 긴 수많은 영어중에 우리에게 필요한건 뭐?
바로 ##_article_rep_desc_## 입니다
그럼 이 ##_article_rep_desc_##가 무엇이냐? 바로 포스트 본문 내용을 의미하는 코드 입니다
눈치 빠른 분들은 이해 하셨겠지만 ##_article_rep_desc_## 이것을 기준으로 위에 삽입하느냐
아래에 삽입 하느냐에 따라 포스트의 글 위에 광고가 뜨느냐 아래에 뜨느냐가 결정 됩니다
Tip - ##_article_rep_desc_##를 찾는 방법?
컨트롤(ctrl)+F 를 누르시고 article_rep_desc 만 검색해 보세요! 하나뿐이라 바로 나옵니다


3. 코드를 삽입할 박스를 만들자!

네네 그렇습니다 그냥 광고를 삽입해도 아~~~~무 문제가 없습니다!
그런데 왜 귀찮게 박스까지 만드냐구요? 그건 바로 포스트의 가로 크기보다 광고 크기가 작거나
또는 광고의 위치/모양의 변경을 막기 위해서 입니다
그럼 여기서 박스만들기인 테이블 태그에 대해 간단히 알아 보도록 하겠습니다
테이블 태그는 기본적으로
여러가지 옵션을 넣을수 있는<table>로 시작하여 </table>로 끝나게 됩니다.
그리고 그 사이에 행을 만들수 있는 <tr></tr>과
칸을 만들수 있는 <td></td>가 존재 합니다
어렵다구요?

<table>
<tr>
<td>
</tr>
</td>
</table>
 만 있어도 박스가 만들어 지게 되죠
기본 구성만 알아도 광고 삽입에는 아무 문제가 없습니다! 어짜피 저희에게 필요한건 광고를 보호해줄
단 1개의 박스이기 때문이죠
자 그럼 위 단일 박스에 옵션을 추가해 보도록 하겠습니다
테이블 태그에서 사용할수 있는 옵션은 아래와 같습니다

아래 옵션 설명은 <<
http://blog.naver.com/dmsal7777 >> 님의 테이블태그1 에서 따왔습니다

border=수
표의 테두리 두께를 조정해 줍니다. <table>에서만 사용합니다.

bordercolorlight=색상코드
밝은 테두리색을 정하는 속성입니다. 밝은 테두리는 테두리의 위쪽과 왼쪽 부분을 말합니다. <table>에서만 사용합니다.
 
bordercolordark=색상코드
어두운 테두리색을 정하는 속성입니다. 어두운 테두리는 테두리의 아래쪽과 오른쪽 부분을 말합니다. <table>에서만 사용합니다.

bgcolor=색상코드
배경색을 정해줍니다.

cellspacing=수
셀과 셀사이의 간격 조정을 하는 속성입니다. 숫자가 작아질수록 간격은 좁아지겠죠? <table>에서만 사용합니다.
cellpadding=수
셀 내부에 간격을 조정하는 속성입니다. <table>에서만 사용합니다.

width=수, height=수
가로와 세로의 크기를 지정하는 속성입니다. 가로는 width, 세로는 height입니다.

colspan=가로셀수, rowspan=세로셀수
셀을 가로, 세로로 합치고 싶을 때 사용하는 속성입니다.

align=위치
테이블의 위치를 지정 합니다.

자 이것만으론 잘 모르시겠죠?
직접적으로 애드센스 코드 삽입에 필요한 속성만으로 구성한 테이블 태그 입니다
<table width=xxx align=center border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
애드센스 코드 삽입 구간
</tr>
</td>
</table>
이곳에서 주의할점은 "width=xxx" xxx 부분에 자신이 만든 광고의 가로 크기를 적어 주시면 됩니다


사용자 삽입 이미지

최종적으로 저의 티스토리에 삽입된 광고 코드 입니다
한가지 팁을 드리자면 <table>과 </table>의 위 아래에 있는
<!-- 구글 애드센스 코드 -->
이것은 다음에 코드 수정시 컨트롤+F 누르시고 구글 이라고 검색만 하시면 찾기 쉽도록 달아둔 주석입니다


- 자 이것으로 포스트가 끝이 나는군요! 허접한 지식으로 허접한 글재주로 쓰다 보니
지루하고 재미 없고 어려운 포스팅이 되버렸습니다 ^^;;
모두들 잘 따라 하셔서 이쁜 광고 넣으셔서 부자 되시길 바라겠습니다