블로그 운영 로그

티스토리, 구글, 워드프레스 블로그 운영 로그: 블로그 세팅, 에드센스, SEO 에 대한 기록...

티스토리 블로그

티스토리 오디세이(Odyssey) 하단 광고 설정

tiblo 2023. 6. 17. 23:07

티스토리 오디세이(Odyssey) 스킨의 에디터 영역에 에드센스 광고코드를 설정하여 상단 광고 설정에 이어 이번에는 글을 작성할 때마다 자동으로 하단에 자동으로 광고가 송출되도록 하는 방법에 대해 정리하였습니다.


- 목차

1. 에드센스 디스플레이 광고 생성

2. 하단 광고 위치 잡는 법

3. 광고코드 삽입


 

1. 에드센스 디스플레이 광고 생성

에드센스 디스플레이 광고 생성은 이전에 작성된 상단 광고 삽입 내용에서 생성한 광고 코드를 그대로 사용했으며 해당 광고는 오디세이 스킨 상단, 하단, 본문 광고 3가지를 공통으로 사용할 예정입니다.

광고 코드 생성 방법은 이전 글들을 참고해 주세요

 

티스토리 오디세이(Odyssey) 사이드바 고정 광고 설정

 

티스토리 오디세이(Odyssey) 사이드바 고정 광고 설정

저는 티스토리 오디세이(Odyssey) 스킨과 같이 깔끔하고 모던한 느낌의 웹사이트를 좋아합니다. 화이트 톤이라 야간에는 눈이 좀 부담스럽지만 에드센스 광고를 넣어도 본문 글의 가독성을 해치

tiblo.gbminnote.com

티스토리 오디세이(Odyssey) 상단 광고 설정

 

티스토리 오디세이(Odyssey) 상단 광고 설정

티스토리 오디세이(Odyssey) 스킨의 에디터 영역 상단에 에드센스 광고코드를 설정하여, 글을 작성할 때마다 자동으로 상단에 광고가 송출되도록 하는 방법에 대해 설명하겠습니다. - 목차 1. 에드

tiblo.gbminnote.com

 

2. 하단 광고 위치 잡는 법

하단 광고는 댓글과 관련글 사이로 넣어주려고 합니다.

하단광고위치

 

브라우저에서 F12를 눌러 개발자 도구를 실행합니다. 이후 좌측 상단의 화살표를 클릭하고 댓글 영역을 선택합니다.

개발자도구

 

댓글 영역을 아래와 같이 선택하면 article-reply라는 영역이 댓글 영역인 것을 확인할 수 있습니다.

댓글영역

 

관련글 영역도 확인해 보겠습니다. article-related라는 영역으로 확인했습니다.

관련글 영역

 

광고 삽입할 위치를 는 아래와 같이 되는것으로 확인했습니다.

<클래스 article-related 영역>

하단광고위치

<클래스 article-reply 영역>

 

 

3. 광고코드 삽입

광고 위치를 선정했으니 실제로 스킨에 적용합니다. 티스토리 관리자 스킨 편집 메뉴 HTML 편집 모드로 접속합니다.

article-related 영역과 article-reply 영역을 확인합니다. 아래 캡처 화면을 봐주시면 되겠습니다.

하단광고 위치선정

 

광고 위치를 찾았으니 광고 코드를 삽입합니다.

하단광고삽입

 

이제 광고가 잘 송출되는지 사이트에서 확인해 봅니다.

광고 송출 확인


상단광고에 이어서 티스토리 오디세이(Odyssey) 스킨의 하단 광고를 설정해봤습니다. 가독성을 해치지 않는 선에서 본문 영역 바로 아래 하단 광고를 하나 더 추가하는 것도 좋을 것 같습니다.