광고를 블로그 사이드에 고정해 광고를 조금 더 효과적으로 볼일 수게 하는 방법으로 흔히 플로팅 광고라 부르기도 합니다.
여기서 소개해 드릴 사이드바 광고는 완전 고정이 아닌 반고정이라고 해야 할 것 같습니다. 고정되어 있다가 본문이 끝나는 시점에서 고정이 풀라는 방식입니다.
코드 자체는 짧고 별거 아니지만 제 블로그 댓글란에 사이드바 고정 광고 질문이 많아 포스팅으로 답변을 대신하려고 합니다.
티스토리에서 배포하는 북클럽 스킨과 매거진 스킨 그리고 담따201 라이트 스킨에 적용하는 방법을 설명합니다. 그 외 스킨은 아래 내용을 참고해 적용하시길 바랍니다.
참고 : 오디세이 스킨은 아래와 같은 방식으로는 적용이 안 됩니다. 구글에서 "오디세이 스킨 사이드바 고정"으로 검색하시면 다른 방식으로 적용하는 포스팅을 찾을 수 있습니다.
고정 광고 방식에 대해 애드센스 정책 위반이다 또는 아니다 논란이 있었습니다.
얼마 전만 해도 플로팅 광고 고정 광고는 분명 애드센스 정책 위반에 해당하였고 일부 대형 커뮤니티 사이트나 신문사 등에서만 허가 후 사용한 것으로 알고 있습니다.
하지만 2019년 중반쯤부터 애드센스에서 "플로팅 광고를 제한한다"라는 문구가 사라졌습니다. 그렇다고 해서 허용한다는 공식적인 내용도 없었습니다.
제 블로그의 경우 올 3월경부터 약 9개월 이상 사이드바 고정 광고를 달고 있지만, 정책 위반으로 문제가 되지는 않았습니다.
정책 위반 관련해서는 각자 구글링을 통해 알아보시고 결정하시길 바랍니다.
사이드바 고정
아래 소개해 드릴 사이드바 고정 방식은 플로팅 광고처럼 완전히 지속해서 고정되는 것이 아닙니다. 경우에 따라 조건에 맞으면 고정되었다가 다시 움직이는 방식으로 완전히 고정된 방식보다 구독자들에게 덜 부담감을 줄 것 같다는 생각도 들고 네이버 메인이나 신문사 등에서 요즘 많이 보이는 형태입니다.
본문 또는 메인 화면이 사이드바의 높이보다 높아야 효과가 있습니다. 거꾸로 말하면 사이드바 길이는 긴데 본문 내용이 짧으면 그 페이지에서는 효과가 없습니다. 본문이 끝날 때까지 광고가 고정되는 만큼 적당한 광고 수를 유지하는 것이 좋을 것 같습니다.
현재 보고 있는 페이지에서 스크롤을 아래로 내리면 사이드바가 고정되는 모습을 볼 수 있습니다. 그리고 본문이 끝나면 다시 사이드바가 스크롤에 따라 움직이기 시작합니다.
참고로 IE11 이하에서는 작동되지 않습니다. 주변에 아직 인터넷 익스플로러를 사용하고 계신 분들이 있다면 엣지 브라우저 또는 크롬 브라우저와 같은 모던 브라우저를 사용할 수 있도록 도와주시길 바랍니다.
아래 코드를 복사해 CSS 편집 창으로 가서 아무 곳에 붙여넣기 합니다.
담따201 라이트 스킨 사용자
.blog-sidebar {
position: sticky;
position: -webkit-sticky;
align-self: flex-start;
top: 10px;
}북 클럽(Book Club) 스킨 사용자
@media screen and (min-width: 767px) {
#aside {
position: sticky;
position: -webkit-sticky;
top: -60px;
}
}매거진(Magazine) 스킨 사용자
#sidebar {
position: sticky;
position: -webkit-sticky;
top: 100px;
}