다음 뷰 애드 정렬하기

다음뷰 애드를 설치하신 분들이 많습니다. 점점 좋아질 것이라 기대 해 봅니다. 문제는 역시 디자인. 이래도 이상하고 저래도 이상하고.. 아무래도 광고 정렬은 그냥 위에 쭉 나열되고 본문은 아래에 나열되는 것이 디자인적으로 좋죠.

제 블로그 본문은 740px입니다. 구글 애드를 설치해도 공간이 남아서 저런 박스형 광고는 아예 설치를 하지 않았었습니다. 그런데 다음 애드센스를 설치하면서 어쩔 수 없이 위쪽에 광고를 배치했습니다. 그래도 기본적인 제 생각은 광고 공간과 본문 공간이 나뉘었으면 좋겠다는 생각으로 지금의 모양을 꾸며 봤습니다.

1. 기존에 이미 광고가 있던 경우
오 마이 갓~
가운데 저 공간은 대체 뭐냔 말입니다. 아래로 스크롤을 해야 볼 수 있지만 광고 사이에 있는 공간은 안습입니다. 더군다나 텍스트가 위쪽에 있을 경우에는 말입니다...

이런 젠장...
글자가 가운데로 밀려 올라가서 민망한 구조가 되어 버렸습니다.
그래서 구글을 뺐습니다.

구글 광고를 빼고 텍스트를 위로 올리니 어느정도 제대로 보입니다.
그런데 저는 이미지가 먼저 보였으면 좋겠단 말이죠. 저렇게 하려면 기존에 포스팅 한 것을 전부 바꿔야 하는 불상사가 일어날 수 있다는 불안감이 엄습해옵니다.

그래서 생각을 해 보니 그냥 위쪽에 광고로 쭉 나열을 하면 어떨까 하는 생각을 했습니다. 문제는 광고 크기가 맞지 않아 한개를 더 추가해서 정렬을 해보기로 합니다.

 

1. CSS에 추가하기

이미지 클릭

우선 구글 애드를 두 개 설치하기 위해서 Style.css에 모듈 두 개를 추가 해 놓습니다. 소스를 잘 모르시는 분을 위해 간단하게 설명한다면 float는 광고의 위치를 결정합니다. left로 하면 왼쪽. right 하시면 오른쪽이 구글 광고가 위치합니다. right로 하시면 <다음뷰 애드> 광고는 자연스럽게 왼쪽으로 이동합니다.

margin 은 광고 박스 사이의 여백을 결정합니다. 10px(상), 10px(우), 10px(하), 10px(좌) 로 됩니다. 즉 박스의 윗부분부터 시계방향으로 돌아간다고 생각하시면 됩니다.

2. SKIN.HTML에 적용하기

우선 구글을 집어 넣어야겠죠. 저는 본문이 740px 이라 작은거 하나 중간꺼 하나 넣어야 겠죠. 가로 120px 사이즈 하나, 300px 사이즈 하나 해서 두개를 넣었습니다. 그럼 250px(다음) + 300px(구글1) + 120px(구글2) = 670px이 됩니다. 나머지 빈 공간은 마진을 이용해서 공간을 벌리면 되겠습니다.

☆ 본인의 블로그 본문 크기를 알고 계시다면 다음뷰(250px)을 제외한 넒이에 적용시킬 구글 이미지를 기억하시고 몇 개를 넣을지 생각하시면 됩니다.

아래를 보시면 본문 내용에 div class로 위에 css에 적어 놓은 것을 div에 적용시키는 것입니다.

이제 좀 이해가 되나요?
div class=google_ad를 넣어서 원하는 방향에 자리 잡도록 배치 했습니다. 이후 빈 공간은 margin(마진)값을 써서 조절을 했죠. 소스가 필요하신 분은 아래 파일을 클릭하시면 됩니다.

Noname1.txt

아무리 광고 정렬을 해도 텍스트가 위로 솟구치는 것이 있을 수 있습니다. DIV나 소스를 써서 텍스트가 흐르지 않게 하는 방법도 있지만, 가장 간편한 것은...

아래처럼 본문을 가로 지르는 긴 줄 이미지를 하나 넣으시면 됩니다. 제 광고 이미지 바로 아래에 점선 이미지 보이시죠? 저거 하나 넣어두면 텍스트가 위로 솟구치는 것을 막을 수 있습니다. ^^

- 더공 -