본문 바로가기

티스토리 사이드바 광고 애드센스 수동 추가 및 고정방법

노랗 2023. 9. 6.
반응형

티스토리 사이드바 광고 애드센스 수동 추가 및 고정방법

티스토리는 다양한 위치에 애드센스 광고를 설정할 수 있는데, 특히 사이드바 메뉴를 가진 스킨의 경우 사이드바에 광고를 추가하는 것이 좋은 선택입니다. 광고 수익을 높이려면 상단바뿐만 아니라 본문 중간, 사이드바, 바닥글 등 다양한 위치에 광고를 배치할 수 있습니다. 사이드바 광고의 경우 어떤 포스팅을 보지 않더라도 노출되므로 광고 클릭 가능성이 높아집니다. 이 글에서는 티스토리 사이드바에 애드센스 광고를 수동으로 설정하는 방법과 마우스 스크롤 휠을 내려도 사이드바 고정하는 CSS 편집방법을 알아보겠습니다.

티스토리 사이드바 자동광고 설정

티스토리는 새롭게 개편되면서 설정을 통해 자동으로 본문상단, 본문중간, 본문하단, 사이드바, 목록상단, 목록하단에 자동으로 반응형 광고를 추가할 수 있습니다.

하지만 자동으로 애드센스 광고를 설정하지 않고 사이드바에 원하는 광고를 고정해서 설정할 수 있습니다.

1. 애드센스 광고 단위 추가하기

먼저 애드센스 계정에 로그인합니다.

'광고단위' 섹션으로 이동한 후 '새 광고단위 만들기'를 클릭합니다.

광고 단위 종류를 선택하며 이때 사이드바에 광고를 노출시키려면 좌측에 있는 텍스트 및 디스플레이 광고를 선택합니다.

애드센스 사이드바에 광고를 노출할 때는 큰 스카이스크래퍼 300 x 600 사이즈를 추천하며 2023년 기준 디스플레이 광고를 선택 해 원하는 사이드바 수평광고로 설정해도 됩니다.

광고 단위 이름을 설정하고 '저장 및 코드생성' 버튼을 클릭 후 나타나는 코드 스니펫을 복사합니다.

3. 티스토리 사이드바 플러그인으로 광고 추가하기

  1. 티스토리 관리 페이지에서 '플러그인' 메뉴로 이동합니다.
  2. '사이드바 플러그인'을 추가합니다.
  3. '배너출력'을 선택합니다.

4. 사이드바에 광고 코드 추가하기

'티스토리 꾸미기' 메뉴에서 '사이드바'를 선택하여 사이드바를 편집합니다.

HTML 배너출력 옆에 있는 '+' 버튼을 눌러 배너출력을 추가합니다.

추가한 배너출력 항목을 우측으로 이동시켜 배너를 활성화합니다.

'편집' 버튼을 클릭하여 애드센스 광고 코드를 붙여넣습니다.

티스토리 사이드바에 애드센스 광고 코드를 사이드바에 추가한 후, 티스토리의 메인 페이지나 다른 페이지에서 사이드바에 애드센스 광고가 노출되는지 확인합니다.

애드센스 광고를 사이드바에 추가함으로써 블로그 방문자들에게 더 많은 광고 기회를 제공하고 광고 수익을 증가시킬 수 있습니다. 광고 위치와 크기를 조절하며 최적의 배치를 찾아보세요.

티스토리 사이드바 광고 고정

이렇게 설정한 사이드바 애드센스 광고는 마우스 스크롤을 하게 되면 자동으로 움직이게 되며 그럼 마우스 스크롤로 이동 시 애드센스 광고가 사라지게 됩니다.

그래서 마우스 스크롤을 해도 애드센스 광고가 아래로 내려가지 않도록 고정하기 위해서는 HTML 에서 CSS에 아래코드를 추가해줍니다.

/* 사이드바 고정 시작 */
#aside {
  position: sticky;
  position: -webkit-sticky;
  top: -60px;
}

그럼 티스토리 사이드바가 마우스 스크롤 휠을 움직여도 사이드바는 움직이지 않고 고정됩니다.

티스토리 사이드바 참고

반응형

댓글