블로그스팟 수익 2배 높이기: 광고가 따라오는 '스티키 사이드바' 1분 완성법

 

블로그 수익 2배 높이기: 광고가 따라오는 '스티키 사이드바' 설정법

본문 글이 길어지면 사이드바의 광고는 금방 위로 사라져 버립니다. 이때 스티키 사이드바 기능을 적용하면, 독자가 글을 읽는 내내 광고나 카테고리가 화면 옆에 고정되어 따라옵니다. 수익형 블로그 운영자라면 반드시 알아야 할 필수 CSS 설정을 소개합니다.

1. 스티키 사이드바(Sticky Sidebar) 핵심 CSS 코드

복잡한 자바스크립트 없이, 최신 CSS 속성인 sticky를 활용해 간단히 구현할 수 있습니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 아래 코드를 넣으세요.

/* 사이드바 고정 설정 */
.sidebar-container { /* 블로그 테마에 맞는 사이드바 클래스명 확인 필요 */
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* 상단에서 얼마나 띄우고 고정할지 설정 (공지바 등이 있다면 조절) */
  z-index: 10;
}

/* 특정 가젯(광고)만 고정하고 싶을 때 */
#AdSense1 { 
  position: sticky;
  top: 20px;
}

2. 내 블로그의 사이드바 '아이디/클래스' 찾는 법

테마마다 사이드바를 부르는 이름이 다릅니다. 내 블로그에 딱 맞는 코드를 적용하려면 이름을 확인해야 합니다.

• 내 블로그 화면에서 F12(개발자 도구)를 누릅니다.
• 마우스 커서 아이콘을 클릭한 뒤, 사이드바 전체 영역을 클릭해 봅니다.
• HTML 코드창에서 id='sidebar' 또는 class='sidebar-wrapper'와 같은 이름을 찾아 위 CSS 코드의 이름 부분에 교체해 넣으세요.

/* 사이드바 고정 설정 */
.sidebar-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* 상단에서 얼마나 띄우고 고정할지 설정 (공지바 등이 있다면 조절) */
  z-index: 10;
}

/* 특정 가젯(광고)만 고정하고 싶을 때 */
#sidebar { 
  position: sticky;
  top: 20px;
}

3. 스티키 사이드바 적용 시 주의사항

1. 부모 요소의 높이: 사이드바를 감싸고 있는 전체 컨테이너의 높이가 본문(Main) 높이와 같아야 끝까지 잘 따라옵니다.
2. Overflow 속성 확인: 만약 부모 요소에 overflow: hidden; 속성이 걸려 있다면 스티키 기능이 작동하지 않을 수 있습니다.
3. 모바일 뷰: 모바일에서는 사이드바가 본문 아래로 내려가기 때문에, 스티키 기능을 데스크톱 화면에서만 작동하도록 미디어 쿼리(@media)를 사용하는 것이 좋습니다.

💡 수익 극대화 전략: 무엇을 고정할까?

추천 1순위: 수익률이 가장 좋은 '애드센스 디스플레이 광고'
추천 2순위: 독자의 다음 클릭을 유도하는 '인기 게시물' 리스트
추천 3순위: 이메일 구독 폼 또는 중요한 공지사항

광고가 독자를 따라다니게 하세요. 노출 시간이 늘어날수록 여러분의 수익 파이프라인은 더욱 단단해집니다!