티스토리 북클럽 스킨에서 에드센스 사이드 광고 고정하는 방법

 

에드센스를 운영하면서 가장 신경 써야 할 요소 중 하나는 광고의 위치입니다. 특히 티스토리 블로그에서 북클럽(Bookclub) 스킨을 사용하는 경우, 사이드 광고를 스크롤 시에도 고정시켜 광고 노출률을 높이고자 하는 분들이 많습니다. 이 글에서는 티스토리 북쿨럽 스킨에서 사이드 광고를 고정하는 방법을 쉽고 간단하게 설명하겠습니다.

 

적용 방법 요약

1. 티스토리 관리 페이지로 이동

   스킨 편집 > HTML 편집 > CSS 메뉴로 들어갑니다.

 

2. CSS 파일 내에서 #aside 항목 찾기

   키보드 단축키 Ctrl + F를 눌러 #aside { 를 검색합니다.

 

3. 약 415번째 줄 위치에서 아래 코드를 확인 

 

#aside {

    float: right; width: 21.296296296296296%;

    padding: 75px 0 32px;

    box-sizing: border-box;

}

 

4. 기존 코드에 고정 속성 추가

아래와 같이 코드를 수정하여 광고가 고정되도록 설정합니다:

<코드 추가> 

 

    position: sticky; /* 사이드바 고정 */
    top: -45px; /* 사이드바 고정 위치 조정 */
    overflow: auto; /* 내용이 많을 경우 스크롤 설정 */

 

<완성된 코드>

 

#aside {
  float: right;
  width: 21.296296296296296%;
  padding: 75px 0 32px;
  box-sizing: border-box;
  position: sticky; /* 사이드바 고정 */
  top: -45px; /* 사이드바 고정 위치 조정 */
  overflow: auto; /* 내용이 많을 경우 스크롤 설정 */
}

 

키보드 단축키  Ctrl + F 를 눌러  #aside {  를 검색 추가      position: sticky; /* 사이드바 고정 */    top: -45px; /* 사이드바 고정 위치 조정 */    overflow: auto; /* 내용이 많을 경우 스크롤 설정 */

 

5. 변경 사항 저장 후 확인

저장 버튼을 눌러 수정 사항을 반영하고, 블로그를 새로 고침 하여 사이드바 광고가 고정되어 있는지 확인합니다. 

 

주의사항

1. position: sticky는 부모 요소의 overflow 속성이 visible일 때만 정상적으로 작동합니다. 만약 고정되지 않는다면 상위 요소의 CSS 속성도 함께 점검해 보세요.

 

2. top 값을 조절하여 고정 위치를 블로그에 맞게 세부 조정할 수 있습니다.

마무리

티스토리 북쿨럽 스킨에서 사이드 광고를 고정하는 것은 간단한 CSS 수정만으로 가능합니다. 이 방법을 통해 광고 노출 효과를 높이고 수익 향상에 도움이 되길 바랍니다.

 

 

무료 건강검진 100% 활용법: 병원비 줄이는 최고의 건강관리 전략

 

옷 오래 입는 절약 꿀팁: 세탁과 보관으로 실천하는 의류 관리 전략

 

친환경 절약 실천하기! 재사용과 업사이클링으로 환경도 살리고 비용도 줄이는 법

 

커피 한 잔 아끼면 1주일 후 내 통장에 뭐가 생길까? 절약과 초소액 재테크의 시작

 

매달 나가는 고정지출, 이렇게 줄여봤어요!