본문 바로가기
이것저것

티스토리 사이드바 광고, 스크롤해도 고정시키는 방법

by typenine9 2024. 3. 8.
300x250

티스토리 사이드바 광고, 스크롤해도 고정시키는 방법

 

티스토리 로고

 

블로그를 운영하시는 분들이라면, 광고 수익을 위해 사이드바 배치에 많은 고민을 하실 겁니다. 특히, 방문자가 스크롤을 내려도 눈에 띄는 고정 광고는 효율적인 수익 증대에 크게 기여할 수 있죠. 오늘은 이런 고정 광고를 티스토리 블로그에서 어떻게 설정하는지에 대해 자세히 알아보겠습니다.

 

 

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

 

티스토리 로고 영어

 

 

 

먼저, 이 설정은 북스킨을 사용하는 티스토리 블로그에서만 적용 가능합니다. 북스킨은 그 구조가 CSS 수정을 통한 다양한 커스터마이징을 지원하기 때문에, 광고 고정 같은 기능도 손쉽게 추가할 수 있습니다.

 

본론으로 들어가서, 사이드바에 있는 광고를 스크롤해도 항상 같은 위치에 고정시키려면 몇 가지 CSS 코드를 추가해야 합니다.

 

 

1. 블로그 관리 → 꾸미기 → 스킨편집 클릭

스킨 편집

 

 

2. 오른쪽 상단 html 편집 버튼 클릭

html 편집 클릭 화면

 

 

 

3. 상단의 CSS 클릭

CSS 클릭

 

 

위에서 CSS 클릭 후 보이는 코드들 맨 아래 부분에 아래의 코드를 복사하여 여러분의 티스토리 블로그 CSS 설정에 추가해 주세요.

 

코드 삽입 화면

 

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

 

#aside는 사이드바를 지칭하는 ID이며, position: sticky;는 스크롤을 내려도 해당 요소가 뷰포트 내에서 고정되도록 하는 속성입니다. top: -60px;는 광고가 화면 상단에서 얼마나 떨어져 있을지를 지정하는 부분입니다. 이 값을 조절하여 광고의 위치를 원하는 대로 조절할 수 있습니다.

 

스크롤 해도 사이드바 광고 고정된 화면
스크롤 진행해도 사이드바 광고 고정된다.

 

 

 

이렇게 설정을 마치면, 방문자가 페이지를 아무리 스크롤해도 사이드바에 배치된 광고가 항상 보이게 되어, 광고 노출 빈도와 클릭률을 높일 수 있습니다.

 

 

끝으로

이번 글을 통해 여러분의 티스토리 블로그 사이드바에 광고를 고정하는 방법을 알아보았습니다. 이 작은 팁 하나가 여러분의 블로그 운영에 큰 도움이 되어, 더 많은 수익을 창출하는 데 기여하기를 바랍니다. 항상 좋은 콘텐츠와 현명한 광고 배치로 방문자와 수익 모두를 만족시키는 블로거가 되시길 응원하겠습니다.

 

▼ 아래 블로그 정보도 보고가세요! ▼

 

 

무조건 블로그 방문하게 만드는 제목 후킹 전략 29가지

무조건 블로그 방문하게 만드는 제목 후킹 전략 29가지 블로그 글을 써도 방문자 수가 늘지 않는다고요? 이 글을 읽고 아래 소개한 방법만 실천한다면 블로그 방문자 수가 이전 대비 최소 30% 이

typenine9.tistory.com

 

 

블로그 체류시간 2배로 만드는 어휘력 향상 꿀팁

블로그 체류시간 2배로 만드는 어휘력 향상 꿀팁 어휘력은 블로그 포스팅 작성에 있어서 중요한 요소 중 하나 입니다. 아무리 블로그 제목을 잘 지어도 본문 내용이 눈에 잘 안 들어온다면 오히

typenine9.tistory.com

 

<