저는 티스토리 오디세이(Odyssey) 스킨과 같이 깔끔하고 모던한 느낌의 웹사이트를 좋아합니다. 화이트 톤이라 야간에는 눈이 좀 부담스럽지만 에드센스 광고를 넣어도 본문 글의 가독성을 해치지 않고 사이드바나 하단에 광고 배치를 해도 프레임을 침범하는 경우를 거의 보지 못했습니다. 블로그 타이틀에 이미지를 넣지 않아도 깔끔해 보이죠 몆 가지 수정해야 할 내용도 있지만... 그래도 티스토리 스킨 중 가장 좋아합니다.
티스토리바 사이드 광고를 넣는 방법이 다른 스킨도 대부분 비슷한데 오디세이 스킨에서 에드센스 사이드 광고를 넣는 방법과 스크롤을 이동해도 사이드바 광고가 화면에 고정되도록 하는 방법에 대해서 내용을 정리해 보도록 하겠습니다.
- 목차
1. 에드센스 사이드 광고 생성 하기
에드센스 승인을 받으면 광고 메뉴에서 광고단위 기준을 만드실 수 있습니다. 어떤 광고를 만들지 광고 팝업을 생성하는 기능이라고 보면 됩니다. 아래 화면과 같이 디스플레이 광고를 생성합니다.
사이드광고는 옆에 세로로 길게 표시되는 게 일반적이기 때문에 수평형은 광고의 가독성이 떨어집니다. 때문에 사용을 지양해 주시고, 사각형이나 수직형 중 취향에 맞게 생성하면 됩니다. 참고로 사이드바에 광고를 2개 이상도 넣을 수 있습니다. 디자인을 해치지 않는다면 사각형, 수직형 하나씩 넣어도 됩니다.
광고형태를 고르셨다면 오른쪽 메뉴의 광고 단위 이름을 지정해 주시고 광고는 반응형으로 만들어주면 됩니다.
광고를 생성하면 광고 메뉴에 광고단위가 생성된 것을 확인할 수 있습니다.
2. 사이드바 광고 넣기
광고 단위설정이 완료된 후 티스토리 관리자 페이지, 플러그인 메뉴에서 사이드바에 HTML을 입력할 수 있는
태그 입력기 플러그인을 활성화합니다.
플러그인이 활성화되었다면 꾸미기 → 사이드바 메뉴에 태그 입력기를 추가합니다.
태그 입력기를 편집하여 애드센스 광고단위 메뉴에서 생성한 태그를 HTML 형식으로 입력합니다.
태그 입력이 완료되면 사이드바에 광고 설정이 완료됩니다.
3. 사이드 메뉴 화면에 고정하기
광고 설정이 끝난 후 사이트에 노출된 광고를 확인해 보면 작성된 본문 스크롤을 내릴 때 사이트 광고에 표시된 광고가 화면 상단에 고정되어, 글을 읽는 동안 사이드 광고가 화면에서 사라져 버립니다. 방문자에게 광고를 계속 노출해야 하기 때문에 사이드바를 스크롤 이동에 맞춰 화면에 고정해 주는 작업이 필요합니다.
티스토리 관리자 → 스킨편집 → HTML 편집 → CSS 메뉴로 이동합니다.
CSS에 아래와 같이 코드를 추가합니다.
여러 가지 방법이 있지만 제가 실제 적용한 코드를 기준으로 설명드립니다.
/* 사이드바 고정*/
#sidebar {
position: sticky;
position: -webkit-sticky;
top: 100px;
}
@media screen and (min-width: 1061px)
{ .wrap-right .area-aside { align-self: flex-start; position: sticky; top: 32px; height: 100%} }
#wrap {overflow: auto; overflow-x: hidden; height: 100%; }
/* 사이드바 고정 끝*/
HTML이나 CSS를 편집해서 코드를 넣으실 때는 관리를 위해 주석을 달아주셔야 추후에 관리하기가 편하며 다른 블로그에 적용할 때도 참고할 수 있습니다.
'티스토리 블로그' 카테고리의 다른 글
| 티스토리 오디세이(Odyssey) 표, 테이블 글자 크기 변경 방법 (0) | 2023.08.12 |
|---|---|
| 티스토리 오디세이(Odyssey) 리스트 인피드 광고, 하단 고정 광고 설정 (0) | 2023.06.26 |
| 티스토리 오디세이(Odyssey) 다른글 메뉴 삭제 방법 (0) | 2023.06.20 |
| 티스토리 오디세이(Odyssey) 하단 광고 설정 (0) | 2023.06.17 |
| 티스토리 오디세이(Odyssey) 상단 광고 설정 (0) | 2023.06.16 |