[티스토리 최적화] 티스토리(북클럽) 스킨 사이드바 고정하는 방법

 

티스토리 화면에서 사이드 메뉴가 위로 올라가 버리면 우리의 주 목적인 광고가 보이지 않는 상황이 발생합니다.

이 상황에서 사이드 메뉴가 멈춰있다면 생각하게 되었고 그런 기능이 CSS 기능을 활용하여서 적용할 수 있다는 것을 확인하였습니다.

 

티스토리 최적화

1. 사이드 바 고정하는 CSS 찾기

Postition  : sticky는 화면상에서 원래는 고정되어 있던 자신의 위치에서 벗어나면 설정해 놓은 위치로 고정이 됩니다.  스크롤을 하게 되면 원래 있던 위치로 돌아옵니다. 

Position 명령어

Position 명령어에 대한 설명을 해당 홈페이지에서 확인 가능합니다.

 

 

2. 애드센스 광고 사이드바 고정

블로그 관리 ▶ 꾸미기 ▶ 사이드 바 ▶ 사이드에 광고 넣기

티스토리 최적화

 

3. 사이드에 Postition  : sticky  CSS 코드 넣기

꾸미기 ▶ 스킨편집 ▶  html 편집 ▶  CSS 선택 ▶  사이드바 고정 코드 삽입

티스토리 최적화

 

 

티스토리 최적화

 

사이드바 고정 CSS 코드

#aside {
  position: sticky;
  position: -webkit-sticky;
  top: -60px;
}

 

마무리

이렇게 사이드 바를 고정하게 되면 광고를 계속적으로 블로그 방문자에게 노출하는 효과 및 카테고리를 노출하는 효과가 있습니다. 다만 이렇게 하는 것에 있어서 문제 있는지에 대해서는 좀 더 찾아봐야 할 것 같습니다.

 

 

다른 포스팅 자료도 있으니 함께 확인해 보시기 바랍니다.

[블로그 최적화] 애드센스 CPC 최적화 하기_블로그 수익화

[블로그 최적화] 티스토리 블로그 최적화 하여 블로그 수익 올리기.1

[블로그 최적화] 티스토리 블로그 최적화 하여 블로그 수익 올리기.2

[블로그 최적화] 티스토리 블로그 최적화 하여 블로그 수익 올리기.3

[블로그 최적화] 티스토리 블로그 최적화 하여 블로그 수익 올리기.4

[블로그 최적화] 티스토리 블로그 최적화 하여 블로그 수익 올리기.5