티스토리 사이드바 고정 플로팅 광고 간단히 하는법

엄밀한 의미에서 플로팅 광고는 아니지만 사이드바 전체를 유동적으로 고정해서

광고 수입 밑 블로그 내 다른 글 유입을 늘리는 방법이다.

 

복잡한 자바 스크립트 j쿼리 방법도 있지만 간단한 방법은 티스토리 스킨 편집에 들어가서

html 편집을 클릭 후 css탭을 클릭해서 css 코드에 들어가서 제일 아래줄에

@media screen and (min-width:1081px) {
    .menu-side {
    position:sticky;
    position: -webkit-sticky;
    align-self: flex-start;
    top:0;
    }
}

이렇게 추가하면 된다.

 

저기 .menu-side 부분을 스킨이 다르면 다른 걸로 바꿔야 되는데

css에서 컨트롤+f를 눌러 사이드바나 sidebar 등을 검색해서 사이드바 코드를 찾아서

사이드바 코드 제일 시작지점에서 제일 앞에 써있는 코드를 보면

. menu-side를 대체할 그 스킨의 딱 맞는 코드를 찾을 수 있다.

 

내 스킨은 저렇게 되어 있는데 주의할 것은 사이드바 각각의 것 예를 들어 카테고리 사이드바 테그 사이드바 뭐 이런것 에 대한 코드를 찾으면 안 되고 사이드바 전체에 대한 코드를 찾아야 된다.

아마 저부분이 달라서 저 코드 그냥 복붙하면 작동 안 할 것이다.

포스터 왓에버 북클럽 스킨의 경우 저부분이 #aside로 되어있을 것이고

매거진 스킨의 경우 #sidebar로 되어있을 것이다.

 

이렇게 하면 본문이 길어도 사이드바 부분이 비지 않고 유동적으로 움직여 사이드바 부분의 활용도가 높아질 것이다.

물론 사이드바에 광고를 배치하면 플로팅 광고 유사한 효과가 난다.

지금 이 블로그 보면 이 코드가 적용되어 있는 사이드바를 볼 수 있다.

딱히 애드센스 광고 부분만 플로팅 광고 처리해도 사이드바 부분은 요즘 애드센스 정책 위반이 아니라고 하던데

그렇게 광고만 플로팅 처리하면 방법이 조금 더 복잡해져 스크립트가 길어지고 스크립트가 길어지면

아무래도 처리시간 즉 페이지 로딩시간이 조금이라도 늘어나고 광고만 플로팅 처리되기 때문에

조금 위화감 있는 사이드바 스크롤이 되게 된다.

이렇게 간단하게 css 코드로 하게 되면 사이드바 부분도 자연스럽고 구현 난이도 또한  쉽게 할 수 있다.