티스토리 블로그 북클럽 스킨 편집 - #2 사이드바 고정하기(사이드광고)

 

티스토리 사이드바 고정하는 방법에 대해서 알아보겠습니다.
전문적으로 프로그램을 공부하지 않았고, html이나 블로그 관련 소스는 최근에 애드센스 승인 받고 나서 여러군데에서 검색하고 테스트해서 적용 하고 있습니다.
제 블로그 스킨이 북클럽 스킨이어서 북클럽 스킨으로 알아보도록 하겠습니다.

 

 

티스토리 사이드바 고정

 

티스토리에서 사이드바를 고정하게 되면 스크롤로 화면을 내려도 사이드바에 있는 광고나, 카테고리 등 항목들이 계속 노출 시킬 수 있으며, 페이지 하단까지 내려 갔을때 사이바가 위로 움직이며 사이드바의 마지막 항복이 노출이 됩니다.

페이지 길이와 상관없이 사이드바에 셋팅한 광고나 카테고리가 계속 노출이 되는 것입니다.

이제 사이드바 고정하는 방법에 대해서 알아보도록 하겠습니다.

티스토리 사이드바 고정 방법

아래 코드를 CSS탭에 넣어주시면 됩니다.

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

1. 스킨 편집으로 들어가서 [html 편집]을 클릭합니다.

스킨 편집(html편집)

2. CSS 탭을 클릭합니다.

CSS

3. CSS 가장 아래로 내려 마지막 행에 아래 코드를 넣고 [적용] 버튼을 클릭합니다.

사이드바 고정 코드

저는 CSS 맨위에 사이드바 고정 코드를 넣었습니다.

코드 넣는 위치는 상관이 없지만, 나중에 기억하기 쉽게 하기위해서 맨 아래에 코드를 넣는 것을 추천드립니다.

사이드바 고정 코드 주석

저는 기억력이 안 좋아 코드 위아래에 구분할 수 있는 주석을 넣었습니다.

사이드바 고정 코드

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

마무리

사이드바가 계속 고정이 아니라 페이지 하단에 스크롤 했을때 사이드바가 움직입니다.

코드를 추가 후에 페이지를 내리더라도 사이드바에 광고가 계속 노출이 되어 노출효과가 좋을 것 같아서 사이드바에 광고를 넣으신 분들은 추천드립니다.

 

티스토리 블로그 북클럽 스킨 편집 - #1 사이드바 구분선 없애기

티스토리 블로그 북클럽 스킨 편집 - #1 사이드바 구분선 없애기

티스토리로 구글 애드센스 승인 3번만에 받았습니다.

티스토리로 구글 애드센스 승인 3번만에 받았습니다.