티스토리 스크롤시 사이드바 고정 쉽게 따라하기

728x90

목 차

• 1. 사이드바 고정 이유
• 2. 사이드바 고정 방법
• 2-1. HTML 편집 이동
• 2-2. CSS 소스 추가하기
• 2-3. 사이드바 광고 위치 조절하기

반응형

 

1. 사이드바 고정 이유

• 티스토리 글을 읽으면서 스크롤을 내리게 되면 우측 또는 좌측 영역의 빈 공간이 허전하다고 생각합니다. 그래서 광고로 채워두면 블로그 수익에 도움이 된다는 다른 글들을 보고 사이드바 고정을 쉽게 하실 수 있는 방법에 대해 작성해 보겠습니다.
• 필자는 북클럽 스킨을 사용하고 있습니다. 따라서 북클럽 스킨으로 간단하게 만드는 방법을 알려드리겠습니다.

 

---

 

 

2. 사이드바 고정 방법

2-1. HTML 편집 이동

• [티스토리 관리자] - [스킨 편집] - [HTML 편집] 버튼 클릭

 

 

2-2. CSS 소스 추가하기

• html 편집에 들어가서 상단에 "CSS" 탭을 선택해 주세요.
• [Ctrl] + [F] 를 눌러서 "#aside" 를 검색합니다.
• 첫번째 검색된 부분에 이미 #aside가 작성 되어 있습니다. 여기 괄호 안에 아래 소스를 복사해서 붙여넣기 하시면 됩니다.
• 우측 상단 [적용] 버튼 클릭으로 저장하세요.

position: sticky;
top: 0px;

 

 

2-3. 사이드바 광고 위치 조절하기

• 위에 추가한 CSS 소스에서 top: 0px; 부분이 있습니다. 이 부분을 수정해서 사이드바 광고의 위아래 위치를 조절할 수 있습니다.
• top: 0px; 로 적용했을 경우에 사이드바 광고 위쪽에 75px의 빈 공간이 생깁니다. 따라서 스크롤 내릴시 브라우저 주소창에 붙이고 싶다면 -75px로 수정하시면 됩니다.
• 위로 올리고 싶을 경우에는 top에 음수(-) 값을 입력하고, 내리고 싶을 경우에는 양수 값을 입력하시면 됩니다. 원하시는 위치로 자유롭게 값을 작성하시면 됩니다. (예시: top: 100px;)
• 아래 이미지는 top: -75px를 적용해서 스크롤 내릴시 브라우저 주소창에 광고가 고정되어 있는 모습으로 완성하였습니다.

 

사이드바 고정 완성