블로그스팟 사이드바 광고 고정: 내 테마에 맞는 '진짜 이름' 찾아 적용하는 법

 

블로그스팟 '스티키 사이드바' 완벽 적용: 내 테마에 맞는 이름 찾기

스티키 사이드바 코드를 넣었는데 작동하지 않나요? 원인은 딱 하나입니다. 내 블로그 사이드바의 '진짜 이름'을 코드에 넣어주지 않았기 때문입니다. 개발자 도구로 이름을 찾고, 코드를 변형하는 과정을 아주 쉽게 풀어드립니다.

1. 1단계: 내 블로그 사이드바 '이름' 찾기

브라우저의 비밀 도구인 '개발자 도구'를 사용하면 10초 만에 알 수 있습니다.

• 내 블로그 접속: 관리자 화면이 아닌, 실제 사람들이 보는 내 블로그 페이지를 엽니다.
• 검사 창 열기: 키보드의 F12를 누르거나, 사이드바 빈 곳에 마우스 우클릭 후 [검사]를 누릅니다.
• 영역 선택: 개발자 도구 왼쪽 상단의 화살표 아이콘(Select)을 누른 뒤, 사이드바 전체를 감싸는 영역을 클릭해 보세요.
• 이름 확인: 파란색으로 강조된 코드 줄에서 id="???" 또는 class="???"라고 적힌 부분을 찾습니다.

💡 보통 이런 이름들이 많아요:
- id='sidebar'
- id='sidebar-right'
- class='sidebar-wrapper'
- class='secondary'

2. 2단계: 찾은 이름으로 CSS 코드 변형하기

이제 찾은 이름을 아래 규칙에 맞춰 바꿔주기만 하면 됩니다.

구분	내가 찾은 이름	CSS에서 쓰는 기호	변형된 예시
ID	sidebar	# (샵)	#sidebar { ... }
Class	sidebar-wrapper	. (마침표)	.sidebar-wrapper { ... }

3. 3단계: 완성된 최종 코드 적용하기

만약 내 사이드바 이름이 id='sidebar-right'였다면, 코드는 이렇게 변신합니다. [테마] -> [고급] -> [CSS 추가]에 넣으세요.

/* 이름을 내 테마에 맞게 바꾼 최종 코드 */
#sidebar-right { 
  position: -webkit-sticky;
  position: sticky;
  top: 70px; /* 스크롤 시 상단에서 떨어질 간격 */
  z-index: 10;
}

⚠️ 그래도 안 된다면? 마지막 체크!

• 부모 요소 확인: 사이드바를 감싸고 있는 전체 틀(보통 .main-wrapper 등)에 display: flex; 속성이 있어야 스티키가 가장 잘 작동합니다.
• 높이 확인: 사이드바의 높이가 본문(글 내용)보다 짧아야 따라올 공간이 생깁니다.
• 중요도 표시: 코드가 적용되지 않는 것 같다면 sticky !important; 처럼 !important를 붙여보세요.

이제 광고와 카테고리가 독자의 시선을 끝까지 따라갈 준비가 되었습니다. 내 테마에 딱 맞는 이름을 찾아 수익을 극대화해 보세요!