티스토리 블로그 스킨 만들기 6 - 컨텐트 영역에 구글 애드센스 광고 설치하기

블로그나 웹사이트는 광고를 다는 것이 보통이죠. 구글 애드센스 광고는 이미지도 좋아서 웹페이지나 블로그에 하나의 장식요소로서의 작용도 합니다. 멋진 이미지가 있는 것과 없는 것은 많은 차이가 납니다. 광고달아 수익도 생기고 웹페이지의 모양도 좋아지니 누구나 달고 있습니다. 하다못해 구글 애드센스 광고 달기 적합한 워드프레스 테마 스킨도 나오는 상황입니다. 광고는 돈 벌려고 하는 목적도 있지만 여러가지 부수적인 효과로 인해서 많은 웹사이트에서 사용하고 있습니다.  구글 애널리틱스를 사용하면 웹사이트 방문자에 대한 분석을 무료로 받을 수 있습니다. 아주 상세하고 어떤 포스팅에 몇명의 방문자가 보았는지도 알 수 있고 각종 자료가 많습니다.

이번 글의 목적은 광고를 다는 것에 있는 것이 아니라 컨텐트 영역과 사이드바 영역에 어떤 요소를 추가하는 방법을 알아보는데 있습니다. CSS 기초부분에서 웹페이지에서 아이디 선택자를 사용한 경우 이를 클래스 선택자로 바꾸는 방법을 포스팅 했으니 이곳 의 글을 참고하시면 도움이 됩니다.

1. 컨텐트 영역에 새로운 요소 추가하여 둥근 모서리의 배경 추가하기

flexible-rounded3-final2.zip

위 파일에는 CSS 기초에서 만든 아이디 선택자를 클래스 선택자로 바꾼 html 파일과 CSS 파일이 있습니다. 복사해서 블로그에 적용하고자 합니다.

html 파일을 텍스트 에디터에 열고 Footer라고 나오는 부분을 찾습니다. 1의 footer를 content-top으로 바꾸고 빨간네모를 블럭설정하여 복사합니다.

블로그의 HTML 편집 창에서 id="content로 검색을 하여 1에 클릭한 다음 엔터키를 치고 Ctrl+V키를 눌러 붙여넣습니다. 2부분이 붙여넣은 마지막 부분이고 바로 아래에 3의 wrapTop-content가 있습니다. 이것의 id를 class로 바꿔줍니다. 4의 wrapMid-content도 id를 class로 바꿉니다. id="wrapBtm-content"로 검색하여 id를 class로 바꿔줍니다.

#wrapTop-content 로 검색하여 1부분이 나오면 파운드싸인(#)을 2의 사이드바 전까지 바꿔줍니다. 총 8곳입니다. 저장버튼을 클릭하고 블로그 화면에서 새로고침하면 아래와 같이 나타납니다.

Footer라는 글자는 광고를 삽입할때 지우면 됩니다.

2. 구글 애드센스 광고 삽입하기 

Footer로 검색을 하여 블럭설정하고 구글 애드센스 사이트로 가서 728X90 리더보드 광고 코드를 복사해와서 붙여넣습니다. 구글 애드센스 광고 신청하는 법은 많은 블로그에서 포스팅되어있으니 참고하세요. 구글의 광고는 컨텐트 영역의 상단에 배치하는 것이 제일 좋습니다. 웹페이지의 검색시 헤더 다음으로 나오게 되므로 블로그의 컨텐트보다 앞서 있어서 광고주들이 아주 좋아하는 영역입니다. 광고 입찰에서도 높은 가격을 받는 자리입니다. 

CSS창에서 #content로 검색하여 1부터 2까지 블럭 설정하여 Ctrl+C키를 눌러 복사한 다음 2에서 클릭 엔터치면 커서가 한줄 아래로 내려갑니다. Ctrl+V키를 눌러 붙여넣습니다. #content 다음에 -top를 붙이고 padding 부분을 제거한 다음 margin-left: -3px 0 -3px -4px;을 입력합니다. 광고가 들어가고 나면 자리가 약간 모자라서 좌측으로 이동하고 상단과 하단의 여백이 좌우측보다 넓어서 균형을 맞추는 것입니다. 5의 width 부분은 이미 수정하고 난 상태인데 빨간색의 글씨부분처럼 이퀄싸인을 지우고 :28을 입력해줍니다. 저장한 다음 스킨위자드에 가서 게시글의 넓이를 입력하는 곳의 적용버튼을 클릭하고 하단에서 적용을 클릭하고 나옵니다. 이부분은 이전 글에서 많이 해봐서 잘 아실 겁니다. 블로그 화면에서 새로고침하면 광고가 제대로 나오게 됩니다. 신규로 새로 만들었을 경우 10분 정도 지나야 광고가 나옵니다.

정확하게 맞게 나옵니다.