티스토리 광고수익화 극대화 방법 - 애드센스 사이드바에 고정하기

티스토리에서 광고수익화를 조금이라도 올리고 싶으신분들께 공유드리는 팁입니다

 

스킨중 오디세이 스킨과 북클립 스킨에서

사이드바에 에드센스 고정하는 방법을 알아보겠습니다!

 

*모바일은 적용이 안되며 PC화면에만 국한됩니다*

 

예시를 알려드릴게요!

지금 PC화면으로 보고 계시다면 우측 사이드바에 광고가 고정된 모습도 볼 수 있을거에요

 

또한 제 게시글중 하나인 로드킬 신고 하는 방법의 포스트를 캡쳐찍은 모습이에요

 

위의 스샷을 보면 우측 사이드바에 애드센스 광고가 붙어있는걸 볼 수 있어요

그리고 설정을 따로하지 않은 기본 상태에서 

포스트 아래를 보기위해 인터넷창의 스크롤을 내리면 어떻게 될까요?

 

위처럼 사이드에 있던 광고는 위로 올라가 사라지고

아래처럼 요소들의 끝이 나오게 되요

 

그럼 이제 마지막 스크롤까지 내려도, 사이드의 광고가 화면에 따라다니도록 처리를 하고자 하는데요

아래 예시를 보면 이해가 될거에요

 

글 맨 아래로 와도 우측에 애드센스광고가 살아있죠?

이제 어떻게 하는지 방법을 공유드릴게요

 

공통 절차

 

 

스킨편집->html편집->CSS로 갑니다

 

오디세이 스킨과 북클립 설정이 조금달라서 따로 설명드릴게요

아래 설명드릴 코드는 모두 아래 txt파일에 있으니

혹시 드래그가 안되어도 걱정하지마세요!

구글애드센스_사이드바고정.txt

0.00MB

위의 파일을 다운로드해주세요!

1. 오디세이 스킨에서 설정방법

 

아래 코드를 html편집 css에 추가해주세요

위치는 최하단입니다

 

@media screen and (min-width: 1061px)
{ .wrap-right .area-aside { align-self: flex-start; position: sticky; top: 32px; height: 100%} }
#wrap {overflow: auto; overflow-x: hidden; height: 100%; }

 

위 코드를

 

 

위처럼 CSS 맨아래에 추가해주세요

 

2. 북클립 스킨에서 설정방법

 

아래 코드를 html편집 css에 추가해주세요

위치는 최상단에서 두번째 줄이에요

 

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

 

위처럼 CSS 맨위에서 두번째 줄에 추가해주세요

이렇게 하면 제가 한것처럼 설정이 된걸 볼수 있을거에요!

 

다만 게시글 목록에서는 해당 기능이 적용이 안되는점 참조해주세요 :)

도움이 되었으면 좋겠습니다 감사합니다!