티스토리 애드센스 광고 사이드바 고정하기 스크롤 따라가기 매우 쉬움

 

 

목차

1. 티스토리 사이드바 Class ID 확인하기 (개발자 모드(F12) 활용)

2. 티스토리 테마에 사이드바 고정시키는 CSS 코딩 입력하기

---

티스토리 사이드바에 애드센스 광고 붙이고 본문 내용의 스크롤을 내릴 때 사이드바가 고정되는 걸 보신 적 있으실 거예요.

우선 사이드바의 Class Id는 테마에 따라서 바뀌니 확인하는 방법과 테마에 적용시키는 방법으로 진행하겠습니다. 

빠르게 만들어 보시죠.

반응형

티스토리 사이드바 Class ID 확인하기

테마별 사이드바의 Class ID가 다르기 때문에 확인해줘야 합니다. 

 

1. 적용시킬 티스토리의 사이드바 있는 페이지, 글 접속 후 개발자 모드 실행 (F12키)

- 해당 페이지에서 키보드 'F12' 클릭하여 개발자 모드 창 실행

 

2. 개발자 모드 확인

 

① Select 버튼 클릭

② 사이드바 영역 마우스 클릭

③ 코드에 나온 사이드바 Class ID 확인 (제 건 #aside 이네요)

(티스토리 테마 Book Club의 사이드바 Class ID는 #aside 입니다.)

---

티스토리 테마에 사이드바 고정시키는 CSS 코딩 입력하기

 

1. 티스토리 관리자 페이지 접속 -> 스킨 편집 -> HTML 편집

 

2. CSS 클릭 -> 편집 부분 맨 아래쪽에 코딩 입력

아래 코드 입력

#aside {

position: sticky;

position: -webkit-sticky;

top: -60px;

}

 

3. 본문 맨 위에서 확인한 본인 테마의 사이드바 Class ID는 코딩 맨 위에 수정

 

어때요 간단하죠?

사이드바에는 다양한 정보를 모듈 형식으로 넣을 수 있는데요. 

위에 방법은 사이드바의 맨위 부분을 화면에 고정시키는 방법이기 때문에, 사이드바에 다양한 정보를 넣으신 분들에게는 맞지 않습니다. 

(스크롤을 내려서 사이드바 아래 내용을 확인해야 하는데, 고정되어서 확인이 불가합니다.)

 

그래서 사이드바에 간결하게 광고 또는 글 목록등 한 가지 모듈만 넣으시는 분들에게 적합한 방법입니다. 

 

이상 티스토리 Sidebar 고정시키기 끝!

---