[초보자용] 구글 애드와 뷰 애드 나란히 달기

이 포스팅은 '[질문] 구글 애드와 뷰 애드 나란히 달기'라는 제목으로 포스팅 되었으나 이를 해결하며 업그레이드 한 것입니다. 저의 무지함으로 다소 시간이 오래 걸리기는 했지만 많은 이웃들의 도움으로 무사히 해결하게 되어 저 역시 다른 이들에게 조금이나마 도움이 될까 포스팅을 해봅니다.

초보자를 위한 리뷰
사실 구글 애드와 뷰 애드를 함께 적용하는 것은 이미 많은 블로거들이 리뷰를 올려주었습니다.

러브드웹 님의 뷰애드 애드센스와 나란히 넣는 방법
Ghost jin 님의 다음 구글 광고 나란히 배치하는 방법

저도 위의 두 분의 포스팅을 보고 적용했는데 생각처럼 쉽지않더군요. 구글 애드는 적용됐는데 뷰 애드는 하단에 내려가있고 광고 박스들이 뒤죽박죽... 아 한숨이 절로 나왔습니다.

저처럼 html로 구성된 스킨을 만지는 것 자체를 두려워 하는 분이라면 이 글이 도움이 될 것 입니다. 제가 초보자이기에 초보자도 이해할 수 있는 Tip을 함께 드리겠습니다.

1. 구글애드 코드 넣기

티스토리-스킨-HTML/CSS 편집에 들어가시면 skin.html 박스 보이시죠?
<div class="article"> 을 검색합니다. 검색은 박스에 커서를 놓고 ctrl+F를 누르시고 찾으면 됩니다.

위의 그림이 제 구글애드를 적용한 것인데 왼쪽 표시한 것이 광고의 코드입니다.

<div class="google_ad">
구글 애드센스 코드 --- 복사해서 코드를 여기에 붙이세요.
</div>

[# #_article_rep_desc_# #]

2. style.css 추가하기

위 그림의 빨간박스에 보이듯이 style.css 박스에 해당 내용을 입력합니다.
 

.google_ad{
float:left;
margin:5px 15px 33px 10px;
}

위 텍스트를 복사해 붙여넣으셔도 됩니다. 사실 넣는 위치를 말해주지 않아 고민했는데 Ghost jin 님이 명령어 끝나는 곳이면 어디든 상관없다고 하더군요. 박스 가장 상단에 입력하셨다는 말에 저도 그렇게 했습니다.

3. 중요, 뒤죽박죽 광고들 조정하기

여기까지 하셨는데 광고들이 나란히 있지않고 뒤죽박죽이라면... 지금부터가 중요합니다.
저도 블로그 사이즈가 달라서인지 한번에 적용되지 않았습니다.

박스가 나란히 있지않거나 박스 사이에 텍스트가 흐른다면 구글애드센스의 사이즈를 조절해줘야합니다.
google_ad_width=359;
google_ad_height=260;

skin.html 에서 구글애드의 가로와 세로 숫자를 조정하는데 박스가 나란히 있지않다면 가로(width) 수치를 줄이고 박스 사이에 텍스트가 흐를경우 가로(width) 수치를 늘리세요. 세로(height)도 마찬가지입니다.

여기서 중요한 Tip은 숫자고치고 미리보기를 하실텐데 미리보기를 너무 믿지마세요. 저도 아무리 수정해도 미리보기가 똑같아 절망이었는데 속는셈치고 저장해보니 적용이 되었더라구요.

자, 되셨나요? 이제 포스팅에 대한 불편함도 해소하고 광고를 통한 수익도 기대할 수 있게 되었습니다.