HTML 편집 모드로 수동광고 만들기

컴퓨터가 낯설다면 HTML 편집 모드에 대해 다양한 영상을 먼저 참고하고 정확하게 정리하고 올려야 한다. 블로거마다 조금씩 방법들이 다르기도 하고 자칫 글자 하나 특수문자 하나 잘못 타이핑이 되면 오류가 나기 때문이다. 티스토리에서 구글 애드센스 광고 코드를 삽입하기 위해 HTML 편집 모드를 사용하는 방법은 대략 이러하다.

 

 

1. 구글 애드센스 광고 단위 생성

먼저, 구글 애드센스에서 광고 코드를 얻는 방법부터 알아야 한다.

▲ 구글 애드센스 접속: 구글 애드센스에 로그인한다.

▲ 광고 단위 생성: 좌측 메뉴에서 광고 > 광고 단위를 클릭한다.

▲ 새 광고 단위 생성 버튼을 클릭하여 광고 유형(예: 디스플레이 광고, 텍스트 광고 등)을 선택하고, 광고 단위 이름과 사이즈를 설정한 후 광고 코드 생성 버튼을 클릭하여 광고 코드를 복사한다.

 

 

2. 티스토리에서 HTML 편집 모드로 광고 코드 삽입

티스토리에서 HTML 편집 모드를 사용해 광고 코드를 삽입하는 방법은 크게 두 가지로 나눌 수 있다. 글 본문에 광고 삽입하는 방법과 사이드바 및 레이아웃에 광고 삽입하는 방법이다.

1) 글 본문에 광고 삽입하기

▲ 티스토리 블로그 관리자 페이지로 이동

▲ 새 글 작성 또는 기존 글 수정을 클릭

▲ 글 작성 창 상단에서 HTML 버튼을 클릭하여 HTML 편집 모드로 전환-보통 편집 화면 오른쪽 상단 또는 툴바에 있다. ‘HTML’ 버튼을 찾을 수 있다면 클릭한다.

▲ 원하는 위치에 애드센스 광고 코드를 붙여넣는다. -광고를 삽입할 위치는 본문 중간, 상단, 하단 등 자유롭게 선택할 수 있다. 이때 코드를 붙여넣고 상단에

<div>

<center>

..

.

광고 붙여넣고

.

.

</div>

</center>

이렇게 마무리 한다면 오류없이 중앙에 광고가 들어간다.

 

▲ 저장 또는 발행 버튼을 클릭하여 광고가 삽입된 글을 저장한다.

 

2) 사이드바 또는 레이아웃에 광고 넣기

▲ 티스토리 블로그 관리자 페이지로 이동

▲ 좌측 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동 - 여기서 티스토리 블로그의 전체 HTML 코드나 CSS를 편집할 수 있는데, 사이드바나 위젯 위치에 광고 코드를 추가할 수 있다.

▲ 원하는 위치를 찾은 후, 애드센스에서 복사한 광고 코드를 삽입. - 예를 들어, 사이드바에 광고를 넣고 싶다면 <aside> 태그 안의 적절한 위치에 코드를 넣는다.

저장 버튼을 눌러 변경 사항을 적용한다.

 

3) 스킨 편집을 통해 광고 삽입하기 (헤더나 바디에 삽입)

▲ 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집 메뉴로 이동

▲ 스킨 HTML 편집에서 헤더나 바디에 광고 코드를 삽입할 수 있다.

</head> 태그 바로 위에 코드를 넣으면 헤더 영역에 광고가 들어가고,

</body> 태그 바로 위에 코드를 넣으면 바디 하단에 광고가 들어간다.

광고 코드를 붙여넣고, 저장.

 

코드를 삽입한 후에는 블로그에서 실제로 광고가 잘 나오는지 반드시 확인해야 한다. 코드 삽입 후 몇 분에서 몇 시간이 걸릴 수 있으며, 정상적으로 노출되지 않으면 캐시를 지우고 다시 확인하거나 다른 브라우저에서 테스트해 보는 것이 좋다.