티스토리 사이드바에 애드센스 광고 위치 고정해 따라다니게 하기

 PC에서 애드센스 광고를 게재할 때 선호받는 위치 중 하나가 사이드바입니다.

 사용자의 시선이 자주 머무는데다가, 글을 읽어도 따라다니는 광고를 게재할 수 있기 때문입니다.

 아래는 현재 제 블로그의 홈화면인데, 빨간색으로 표시한 사이드바의 광고가 눈에 띈다는 걸 알 수 있습니다.

 

 

 뿐만 아니라 사이드바 광고는 유저를 따라다니며 꾸준히 존재감을 어필할 수 있습니다.

 특히 그 동안엔 사이드바 광고 고정이 약관위반이다vs아니다로 갑론을박이 있을 정도로 논란이 있었는데, 구글에서 공식적으로 사용을 인가해주면서 불안요소도 사라진 상태입니다.

 

 이번 시간에는 티스토리 블로그에서 사이드바에 애드센스 광고를 고정해서 스크롤을 내릴 때마다 따라다니게 하는 방법을 알아보겠습니다.

 

준비물

 

 당연하지만 애드센스를 게재하실 수 있어야 하며, 사이드바가 존재하는 2단형 이상의 스킨을 사용하셔야 합니다.

 그리고 스킨의 HTML/CSS/JAVASCRIPT를 수정해줄 수 있으셔야 합니다.

 배경 지식이 전혀 없으시더라도 따라하실 수 있도록 글을 써보겠습니다.

 

 아래는 실제 완성품을 보여주는 예제입니다.

 스크롤을 내려보시면 사이드바의 높이가 끝났을 때 사이드바에 고정되는 노란색 광고를 볼 수 있을 겁니다.

 

 

사이드바에 광고 넣기

 

 첫 단계로는 사이드바에 광고를 넣어야 합니다.

 스킨마다 사이드바의 생김세가 다르기 때문에 여기선 HTML의 사이드바 위치를 직접 찾으셔야 합니다.

 

 방법은 간단합니다.

 먼저 블로그의 설정창으로 가신 후, 아래의 사진처럼 스킨편집->HTML편집으로 가서 스킨의 HTML 태그를 볼 수 있는 창으로 가는 겁니다.

 

 

 그리고 <s_sidebar>를 복사해주세요.

 그 후, 컨트롤+F를 누르 후 복사했던 것을 찾아주세요.

 

 검색해주면 사이드바가 있는 쪽의 소스들이 나옵니다.

 아래의 태그에 제가 여기에 광고 코드를 넣어주세요 라고 적은 부분이 있을 겁니다.

 그 메세지를 지운 후 본인 애드센스의 코드를 적고 수정해준 다음 복사해주세요.

 

<s_sidebar_element>
				<!-- 광고창 -->
<div class="s_float">

<!-- 여기에 광고 코드를 넣어주세요 -->

</div>
</s_sidebar_element>

 

 그리고 <s_sidebar>라고 되어 있는 부분 다음에 붙여넣기 해주신 후 확인을 눌러서 저장해주세요.

 마지막으로 꾸미기->사이드바에 들어가주시면 사이드바를 구성하고 있는 모듈들이 있을 겁니다.

 

 

 드래그해서 원하시는 순서대로 수정해서 변경사항을 저장해주세요.

 이제 광고가 정상적으로 나올 겁니다.

 

 그렇다면 이제 사이드바를 내리면 고정되도록 할 차례입니다.

 

사이드바 고정하기

 

 CSS의 position:sticky를 이용해서 고정할 수 있습니다.

 다만 이 경우엔 사이드바 전체를 고정해야한다는 단점이 있습니다.

 그래서 자바스크립트로 고정하는 방법을 소개할까 합니다.

 

자바스크립트로 사이드바 고정하기 

 

 먼저 사이드바의 선택자를 알아내야 합니다. 아까처럼 스킨편집->HTML 편집으로 가서 컨트롤+F를 누르고 <s_sidebar>를 검색해주세요.

 그리고 <s_sidebar> 윗부분을 보면 사이드바의 선택자를 알 수 있습니다. 

 

 스킨제작자분이 사용하신 방법에 따라 다르지만 보통 aside나 div태그로 시작할 겁니다.

 예를 들면 제가 사용하고 있는 스킨에선 <aside class="swimside">라고 되어있습니다.

 

 여기서 선택자가 swimside입니다.

 만약 선택자가 없다면 만들어주시면 됩니다.

 

선택자가 class라면 .이름
선택자가 id라면 #이름으로 사용됩니다.

 

 선택자를 알아내셨다면 자바스크립트로 일정 스크롤이 되면 달라붙게 만들면 됩니다.

 겁내지 마세요, 제가 적은 코드 그대로 복사/붙여넣기를 하면 작동할 겁니다.

 이 코드를 붙여넣을 때엔 HTML에서 </body>를 찾고, 그 위에다 붙여넣으면 됩니다.

 

<script>
function sideads () {
const sidebar = document.querySelector('선택자');
const sideObject = document.querySelector('.s_float');
const sidebarHeight = sidebar.clientHeight;

document.addEventListener('scroll',OnScroll, {passive:true});
function OnScroll () {
const scrollPosition = pageYOffset;

if (sidebarHeight<scrollPosition){
sideObject.classList.add('fixfix');
}
else {
sideObject.classList.remove('fixfix');
}

}

}
sideads()
</script>

 

 마무리로 css작업도 해줘야 합니다.

 여기서 top과 width는 각각 상단으로부터의 거리, 가로 길이입니다.

 본인의 스킨에 알맞게 수정해주시면 됩니다.

 

.fixfix {
position:fixed;
top:60px;	
width:360px;
}

 

주의해야하는 점

 

 만약 스킨이 flexbox로 레이아웃이 설정되어있다면 사이드바의 css에 flex-start를 해줘야하는 경우가 있습니다.

 flex-start를 해주지 않으면 바닥이 본문에 맞춰서 길게 늘어나서 위의 자바스크립트가 작동하지 않기 때문입니다.

 이 점을 제외하면 웬만하면 가능할 겁니다.

 

관련글

스크롤을 내리면 상단에 고정되는 메뉴를 만들기

티스토리 스킨 변경시 주의해야하는 점 정리

웹폰트를 경량화해 페이지 로딩 속도를 빠르게 만들기

렌더링 차단 리소스 제거로 로딩 속도를 최적화 하기