요즘에 본의 아니게 구글광고와 관련한 포스팅을 많이 하게되네요.
이번 포스팅도 의도하지 않았는데 이웃분께서 본문 상단에 걸어놓은 광고의 배치를 알려달라 하시길래.
별 시덥잖은 내용이지만 혹시라도 도움이 될까하고 글을 끄적거려보려고 해요.
예전부터 블로그의 광고배치에 따라 같은 블로그라도 수익의 차이가 있다고 하는데요.
사실 전 그런것 까지는 잘 모른답니다. 수익에 크게 신경쓰지 않고 재미삼아 블로깅을 하고 있다보니....ㅎㅎ
비록 수익과의 연관성은 따지지 않는다 하더라도 들쭉날쭉 배치된 것보다는 어느정도 정돈이 되어 있는게 블로거에게도, 방문자에게도 보기 좋지 않을가 생각해요.
햇반의 블로그 광고
1. 올블릿 + view애드박스
얼마전까지 view애드박스를 달고 있었는데 보름전 쯤 애드박스를 치워버렸습니다.
이유인즉슨 원하는 곳에 배치하기도 까다롭고 브라우져에 따라 원하지 위치에 내려온것처럼 보이더라구요.
또 한가지 이유는 지원금을 받을 수도 없을 것 같았구요.
2. 올블릿 + 애드센스
그래서 애드박스를 치우고 그자리에 애드센스 배너를 달았죠.
250x250px 크기의 올블릿과 애드센스를 배치했는데 두개의 가로크기를 합쳐봐야 500px
본문가로크기는 670px 이었기 때문에 고민을 좀 하다가 올블릿을 내리고 애드센스만 배치하기로 결정했답니다.
3. 애드센스 2개
올블릿은 배너크기 선택의 폭이 너무 좁아서 애드센스 300x250px을 두개 달기로 마음먹고 실천에 옮겼습니다.
그리고 추가로 키워드 광고를 넣었구요.
배너 배치 방법
보통의 경우는 테이블을 이용하실거라 생각됩니다.
그렇지 않는다면 이미지를 적절한 위치에 배열하기 위해 다른 방법도 가능하긴 합니다.
두개의 광고를 연이어서 적용한 모습입니다.
왼쪽으로 쏠려있고 오른쪽에 여백이 많이 남아서 보기가 그닥 좋지 않죠?
제가 한동안 사용했던 배치입니다. 그럭저럭 무난하게 배치가 된 모습이죠?
과연 어떤 방법으로 정렬을 했을까요?
바로 본문배경과 같은 색의 이미지를 사용한 것이랍니다.
바로 위에 있는 그림의 경우
이미지 가로 5px - 왼쪽배너 - 이미지 가로 20px - 오른쪽배너
이렇게 이미지로 여백효과를 준것이죠.
이미지의 가로 크기를 적절하게 조절하면서 배너를 배치할 수 있답니다.
이건 비교적 간단한 방법이죠.
테이블을 이용한 배치
지금은 어떻게 배치가 되었는지 보실까요?
이미지를 이용해서 여백을 줬던 것과 비슷하긴 한데요.
자세히 보면 왼쪽과 오른쪽 여백이 같고 전체적으로 조금더 안정된 느낌입니다.
그럼 더 자세히 살펴볼까요?
테이블의 테두리를 살려볼게요.
이젠 확실하게 느껴지시죠?
자 그럼 위와 같은 테이블은 어떻게 만들면 될까요?
테이블 소스
위에 그림처럼 배치하는 테이블의 소스는 다음과 같습니다.
| 왼쪽배너 광고코드 | 오른쪽 배너 광고코드 |
| 하단 키워드 광고코드 | |
그럼 소스를 조금 설명드려 볼게요. 테이블 태그의 구조는 다루지 않고 필요한 부분만 설명드릴게요.
- table width(테이블의 가로 크기) align="center"(본문영역에서 가운데 정렬) border="0"(테두리 없음)
- td align="middle"(셀 내부에서 중앙정렬) colspan="2"(가로 2개의 셀을 하나로 합침)
여기서 가장 중요한 것은 하단 키워드 광고가 들어가는 셀을 합치는 태그입니다.
몇일전 포스트를 통해서 본문가로크기에 대해서 언급했었는데요.
[IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포] - 티스토리 블로그 스킨설명 - 4. 이미지 자동 리사이징(본문 가로크기 설정)
이때 설명했던 것처럼 CSS의 크기보다 본문에 들어가는 이미지의 크기는 10px정도 작게 들어가도록
본문 가로크기를 10px정도 작게 설정하는게 좋다고 했었는데요.
테이블의 경우도 마찬가지로 10px정도는 작게 넣는게 좋답니다.
그래서 위에 소스에서 테이블의 가로크기는 제 블로그의 본문크기 670px보다 10px 작은 660px로 설정했구요.
나중에 자신의 블로그 크기에 맞게 수정하시면 되겠습니다.
혹시라도 하단 키워드는 생략하실 분들을 위해 1열만 적용된 테이블 소스도 첨부합니다.
| 왼쪽배너 광고코드 | 오른쪽 배너 광고코드 |
별로 대단한 팁은 아니지만 테이블 태그는 다양한 방법으로 활용이 가능하니 알아두시면 나중에라도 도움이 되실거라 생각합니다. ^^
