티스토리 사이드바 고정하는 방법 (플로팅 광고효과)

티스토리에서 우측 사이드 바를 고정해 두면 스크롤을 내려도 사이드바에 있는 광고나 카테고리 등의 항목들을 계속 노출할 수 있고, 페이지 하단까지 스크롤을 다 내리면 그때 사이드바가 움직이며 마지막 항목이 노출된다.

즉, 페이지의 길이와 상관없이, 스크롤 동작과 상관없이 사이드바에는 광고든 카테고리든 세팅해 둔 정보가 계속 보이는 것이다.

내 블로그의 경우에는 페이지 상단에서는 사이드바에 세팅해둔 첫 번째 광고와 카테고리가 보이고,

아래로 스크롤을 내리면 쿠팡 광고와 자동 광고(나올 때도 있고 안 나올 때도 있음)가 보이는데,

그 후로 스크롤을 더 내리면 사이드바에 아무것도 나타나지 않는다.

스크롤 동작에 상관없이 사이드바에 항상 광고나 카테고리 정보가 떠 있었으면 해서 css를 코드를 추가하여 사이드바를 고정해 보았다.

북클럽 스킨에서 아래 코드를 css에 붙여 넣어주기만 하면 된다.

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

1. 블로그 관리> 꾸미기 > 스킨 편집으로 들어간다.

2. 우측 스킨 편집 아래 'html 편집'을 눌러준다.

3. 상단에 css 탭을 눌러준다.

4. CSS 가장 마지막 행에 아래 코드를 넣고 우측 상단 '적용'을 눌러준다.

위치는 상관없이 아무 데나 넣으면 된다고 하지만 나중에 기억하기 쉽도록 나는 가장 마지막에 넣었다.

코드 :

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

코드를 추가한 이후에는 페이지 중간으로 스크롤을 내려도 사이드바에 설정해둔 상단 광고와 카테고리가 계속 보이고

더 아래로 내려도 마찬가지로 유지가 되고,

페이지 가장 하단에 도달하면 사이드바에 마지막으로 설정해 둔 광고가 뜨면서 끝이 난다.

고정이라고는 하지만 페이지 마지막에 도달하면 사이드바가 움직이며 사이드바의 마지막 항목으로 변경되기 때문에 반 고정이 맞는 것 같긴 하다.

코드 추가 후에는 스크롤을 내리더라도 사이드바가 유지되니 광고 플로팅 효과와 비슷해서 노출 효과도 더 좋을 것 같고, 카테고리도 계속 보여서 어디서든 접근하기 편리해서 추천한다.

미니멀라이프