블로그 광고 배너 시작하기
블로그에 광고 달기는 제대로 수익을 벌기 위해서 라기보다는 인터넷 배너 광고 절차가 어떠한 지 프로세스를 한 번은 경험해 보고 싶은 점이 컸습니다. 실제로 제대로 수익을 내기까지 몇 년이 걸렸다는 포스팅도 많이 보았고요. 수익을 위해서면 광고를 인터넷 기사 웹페이지 수준 이상으로 붙여야 하기 때문에 본문을 해치지 않는 선에서 간단하게 넣어 보고 싶었습니다.
애드센스와 애드핏 승인 받기
애드센스는 이미 몇 년 전에 설치를 했었는데요. 제대로 광고 집행까지 가지 못하고 블로그는 방치상태였습니다. 올해 제대로 블로그를 써보자는 생각으로 포스팅을 하고 애드센스 2차 승인을 요청했지만 2주가 넘도록 준비 중 상태에서 반응이 없었습니다. (2023-02-25 기준으로 준비됨 상태로 넘어가서 애드센스 승인이 완료되었습니다.)
그래서 카카오에서 하는 애드핏을 설치했습니다. 애드센스는 2차 승인을 기다린 지 2주가 넘었는데 카카오는 승인 요청한 지 몇 시간 되지 않아 카카오톡으로 알림톡이 왔네요. 바로 설치하고 광고 집행이 가능했습니다.
다만 카카오 애드핏에서 지원하는 사이드바의 광고사이즈의 폭이 250px인데요. 반응형으로 맞춰주지 않고 고정 사이즈여서 사이드바 폭과 맞지 않았습니다. (에드센스는 반응형이라 어떤 사이즈든 맞춤 사이즈로 광고 배너가 출력이 되네요.)
광고 배너 사이즈와 블로그 레이아웃 맞추기
애드핏을 위해서도 있지만 본문 콘텐츠 폭을 늘리고 싶었던 것도 있었기에 CSS를 수정해 주었습니다. 오디세이 스킨의 사이드바 기본 가로폭은 300px이기에 250px로 핏을 맞춰주고 사이드바 때문에 조금 좁아 보였던 본문 콘텐츠 가로폭을 50px 늘려주었습니다.
티스토리 스킨편집 👉 HTML 편집 👉 CSS 탭에서 수정
사이드바의 width 값을 300px 👉250px로 변경
/* area-aside */
.area-aside {
width: 250px;
/* box-profile */
/* box-category */
/* box-tag */
/* box-recent */
/* box-plugin */
/* plugin */
/* box-calendars */
/* box-visit */
/* box-search */
}본문 콘텐츠의 width값을 640px 👉 690px로 변경
/* area-main */
.area-main {
width: 100%;
max-width: 690px;
}
조금 좁아보였던 메인 콘텐츠 영역이 50px 만큼 넓어져서 보기에는 좀 더 편해진 것 같습니다. 생각보다 쉽게 가로폭 수정이 되어서 편리하네요. 오디세이 스킨의 데스크탑 전체폭이 width: 1020px; 로 보이는데 이것도 필요하다면 문제없이 고칠 수 있을 듯하네요.
추가로 본문 광고 가로폭도 맞추고 싶다면?
반응형이 아닌 광고 배너로 본문 가로폭을 꽉채워서 광고를 설치하고 싶다면 본문 가로폭을 728px로 맞추어 주면 됩니다.
가로폭을 원하는데로 조정할 수 있으면 좋겠지만 애드핏은 지원하지 않고 있고 반응형 광고도 지원하지 않기 때문에 제공하고 있는 가로 728px 광고에 본문 가로폭을 맞추기로 합니다.
오디세이 스킨의 전체 max-width값은 1020px입니다. 본문 가로폭을 690px로 잡았고 여기서 38px만 본문 가로폭을 늘려도 표현은 가능하지만 전체 가로폭에서 삐져나가기 때문에 오른쪽으로 살짝 치우처진 레이아웃이 되어버려 그다지 이쁘지는 않습니다.
CSS 편집에서 전체 가로폭 값 1020을 검색해서 1020+38=1058px로 수정합니다.
본문 가로폭을 690px 👉 728px로 다시 수정합니다.
/* area-main */
.area-main {
width: 100%;
max-width: 728px;
}
사이드바와 본문 하단에 광고를 딱 맞게 배치 완료했습니다. 최대한 거슬리지 않는 위치에서 디자인을 해치지 않고 광고를 배치하는 것도 고민이 많이 필요한 부분 같습니다. 데스크탑과 모바일은 잘 확인했지만 티스토리는 티스토리 앱에서 전용 레이아웃으로 고쳐져 블로그가 나오기 때문에 앱도 한 번 확인해 주는게 좋습니다.