티스토리 블로그 사이드바 고정하기(북클럽, 매거진, 담따201라이트 스킨 적용)

 

블로그의 사이드바 스크롤 따라가지 않게 하기?

고정이란 제목을 사용 했지만, 엄밀히 말하면 사이드바가 스크롤을 따라가지 않는 반고정입니다. 본문의 움직임에 사이드바가 따라가지 않다가 본문의 마지막에 도달하면 사이드바가 움직입니다.

 

이를 이용해서 사이드바의 광고가 계속 노출되는 효과를 얻을 수 있습니다. 이를 플로팅 광고라고 합니다.

 

과거 애드센스의 경우 플로팅 광고를 제한한 적이 있으며, 2019년 부터 플로팅 광고를 제한한다는 문구가 사라 졌습니다. 하지만, 허용한다는 문구도 없기 때문에 사용해도 그렇게 문제는 안될 것 같습니다.

 

 

 

 

간단한 코드로 티스토리 블로그 사이드바 플로팅 효과주기

 

북 클럽(Book Club Skin) 스킨

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

위 코드를 CSS에 붙여 넣기 합니다. 다른 코드와 겹치지 않도록 주의 합니다.

 

매거진(Magazine Skin) 스킨

#sidebar {
  position: sticky;
  position: -webkit-sticky;
  top: 100px;
}

역시 다른 CSS 코드와 겹치지 않도록 주의가 필요 합니다.

 

담따201라이트 스킨

.blog-sidebar {
  position: sticky;
  position: -webkit-sticky;
  align-self: flex-start;
  top: 10px;
}

스킨에 따라 코드가 다르기 때문에 스킨에 맞는 코드를 사용 하셔야 합니다.

 

적용방법

북 클럽, 매거진, 담따201라이트 스킨 모두 티스토리 HTML편집 CSS에서 아무 곳에 붙여 넣기 하면 됩니다. 저는 북클럽을 사용하고 있어 북클럽 기준으로 설명 드리도록 하겠습니다.

꾸미기의 스킨편집 -> Html 편집 -> CSS 로 이동합니다.

 

 

저는 북클럽스킨을 CSS 코드 맨 아래쪽에 삽입해 줬습니다.

 

CSS 어디에나 삽입 가능하지만, 기존 코드에 겹치면 안되므로 맨 아랫줄에 삽입해 주시는 게 좋을 것 같습니다.

 

사이드바 고정효과

사이드바가 고정된 화면입니다. 본문 말기에 가서 사이드바가 움직입니다. 

 

본문이 끝날때까지 사이드바가 고정됨으로 광고를 유지할 수 있는 효과가 있습니다.

 

 

 

 

 

완전고정이 아니며, 반고정의 형식입니다. 사이드바 보다 본문이 길어야 효과가 좋으며, 인터넷익스플로러 11 (IE 11) 이하에선 작동이 되지 않습니다.