본문 바로가기
`
티스토리 블로그 팁

티스토리 수동 광고 코드 삽입하는 방법 (4-3. 스킨편집 HTML)

by 그린핑거스 2022. 12. 3.

이전 포스팅에 수동 광고를 삽입하는 총 네 가지 방법 중 두 가지 소개해 드렸습니다.  그 두 가지(4-1. 글쓰기 HTML모드 & 4-2. 글쓰기 기본 모드_서식 삽입)는 매번 글을 쓸 때마다 반복해서 수동 광고를 넣어줘야 하는 반면 이번에 소개해드릴 세 번째 방법은 딱 한 번의 설정으로 글의 시작과 끝에서 항상 수동 광고를 볼 수 있습니다.

 

스킨 편집 > HTML의 <head> </head> 태그 사이에 넣은 구글 애드센스의 자동 광고가 가장 적합한 위치에 자동으로 게재되지만, 꼭 글 시작과 글 끝에 광고가 송출되리란 법은 없습니다. 

구글-애드센스-자동-광고-코드

 

자동 광고를 넣는 곳과 동일한 스킨 편집 > HTML에서 글 시작과 글 끝의 위치를 찾아 수동 광고 코드를 넣어주는 방법을 함께 살펴보도록 하겠습니다. 

 

 

글 시작 부분 찾기

제가 사용하고 있는 '북클럽' 기준으로 설명드립니다. 제 스킨의 스킨 편집 > HTML의 <head> </head> 태그 사이에는 애드센스 자동 광고 코드, 네이버 웹마스터 도구, 구글 서치 콘솔이 등록되어 있습니다. 기본 행(좌측의 번호)이 다를 수 있어 첨부했습니다.

HTML에-넣은-세가지-코드
스킨편집-HTML

 

본문의 글이 시작되는 부분을 찾기 위해 스킨 편집 > HTML로 이동해 'container'를 검색합니다.  검색 결과가 10개가 나오는데, 편리함을 위해 <section id="container">를 검색해보세요. 딱 1개 나옵니다.

html에서-찾은-container
HTML-container-찾기

 

좌측의 홈이라고 되어있는 것을 글로 바꿔줍니다.

기본-홈에서-글로-바꿈
홈에서-글로-바꾸기

 

검색으로 찾은 컨테이너 바로 밑에 확인을 위해 "시작 부분인지 확인합니다."라는 문구를 적어봤습니다.

HTML에-본문시작위치-적기
HTML-시작위치-적기

 

 

확인해보니 아무것도 적지 않은 글 시작 부분에 HTML에서 적은 문구가 그대로 보입니다. 시작 부분을 잘 찾은 것입니다.

HTML과-글-시작부분이-동일한지-확인
HTML-본문시작위치-확인

 

시작 부분을 확인했으니, 그 자리에 내 수동 광고 코드를 대체해줍니다.

HTML-본문시작위치에-수동광고코드넣고-파랑으로-색칠함
HTML-본문시작위치에-수동광고코드넣기

 

삽입 결과를 확인해보겠습니다. 글 제목 바로 밑에 광고가 들어간 것을 확인할 수 있습니다.

티스토리-포스팅-광고송출-확인
시작부분-광고송출-확인

 

이렇게 스킨 편집 > HTML의 글 시작 부분에 광고를 한번 등록해놓았으니, 앞으로 추가 작업 없이도 광고가 송출됩니다.

 

 

글 끝 부분 찾기

끝부분에 고정으로 광고를 넣는 것도, 시작 부분과 방법이 동일하니 위치만 말씀드리도록 하겠습니다. 대표적인 댓글 위에 넣어보도록 하겠습니다. 스킨 편집 > HTML에서 '댓글'을 검색해보면 여러 개가 나오므로 댓글<span class="count">를 검색해 위치를 찾아줍니다. (댓글 옆에 댓글 수를 세어주는 카운트가 있으니 찾기 쉽습니다.)

이 댓글 위쪽에 수동 광고 코드를 넣어주면, 글 끝부분 광고 설정 끝입니다.

댓글-위쪽-위치확인
본문-끝부분-위치확인

 

결과는 다음과 같습니다. 아래 아래의 댓글 보이시죠?

멀티플렉스-수동광고송출-결과

 

①글 시작과 ②마지막에 한 번으로 끝나는 수동 광고 넣기를 적용해 봤습니다. 

이상으로 세 번째 수동 광고 코드 삽입하는 방법을 마치도록 하겠습니다. 마지막으로 알려드릴 배너에 적용하는 수동 광고 코드 넣기는 몇 번의 클릭만으로 쉽게 할 수 있으니 다음을 기대해 주세요~!!


수동 광고 코드 넣는 첫 번째 방법  아래를 참고해 주세요~!

티스토리에 수동 광고 코드 삽입하는 방법 (4-1. 글쓰기 HTML 모드)

 

티스토리에 수동 광고 코드 삽입하는 방법 (4-1. 글쓰기 HTML 모드)

저는 구글 애드센스 홈페이지에서 수동 광고를 만든 후 광고 코드를 복사해 네 가지의 방법으로 포스팅에 적용하고 있습니다. 두 가지는 매번 글을 쓸 때마다 해야 하는 것이고, 나머지 두 가지

greenfingers.tistory.com

 

▼ 수동 광고 코드 넣는 두 번째 방법은  아래를 참고해 주세요~!

티스토리 수동 광고 코드 삽입하는 방법 (4-2. 글쓰기 기본 모드_서식 삽입)

 

티스토리 수동 광고 코드 삽입하는 방법 (4-2. 글쓰기 기본 모드_서식 삽입)

제가 사용하는 네 가지 방법 중 오늘은 두 번째인 글쓰기 기본 모드에서 수동 광고를 적용하는 방법을 함께 살펴보도록 하겠습니다. 수동 광고 만드는 방법과 수동 광고 코드를 가져오는 방법은

greenfingers.tistory.com


제 경험이

작은 도움이 되길 바랍니다.


댓글