블로그 본문 구글 애드센스 + 뷰애드박스 정렬 하는 방법

최종적으로는 블로그 본문에서,
구글 애드센스와 뷰애드박스를 설치 후 정상 표시 하기 위함입니다.

최종적으로 구현하고자 하는 모습입니다.
즉, 좌측에는 구글 애드센스를, 우측에는 뷰 애드박스를 설치하고,
그 다음 줄 부터 본문내용을 시작하고 싶다는 것이지요 ^^
최상단 구글 광고는 있어도 되고, 없어도 되는 구조입니다.



소스코드 상에서 구글 애드센스 스크립트를
div style 코드로 정렬이 되지 않으면 아래처럼 나타나곤 합니다.

본문 시작 텍스트가
구글 애드센스와 뷰 애드박스 사이에 위치해 버리는 것이죠.

모든 배경이 흰색이기 때문에 눈에 안보이는 것일 뿐...
실제로는 구글 애드센스와 뷰애드박스 사이에 공간이 있기 때문입니다.

최종 목적은 텍스트 본문 정렬이기 때문에,
저곳의 빈공간을 어떻게 없애는지가 관건 ^^;;;

결국 구글 애드센스가 차지하는 공간을 조절해야 됩니다.
그런데 너무 길게 해버리면 또 아래처럼 나타납니다.

이같은 경우는 구글애드센스가 차지하는 공간이 커지면서,
뷰 애드박스가 차지하는 공간이 부족하여 나타나는 현상입니다.
있어서는 안될 일이겟죠 ^^;;

일단 해결책을 소개하기 전에,
왜 이런 경우가 나타나는지를 이해하시면 큰 도움이 될것 같아요~

실제로 우리가 보는 화면은 2차원이지만...
3차원으로 바꿔보면....

이렇게 되어 있다고 볼 수 있습니다.
즉, 구글애드센스의 공간이 뒤에 배치되고,
그 위에 뷰 애드박스가 덮어씌어지는 형식이지요.

그래서 뷰 애드박스의 공간이 모자라게 된다고 햇을 경우에는
광고 싸이즈가 줄어드는게 아니라 아래로 밀리게 되는 것입니다.


해결책으로써 기본 골격 소스코드를 옮겨봅니다.

<!-- 최상단 구글 애드센스 코드 -->

// 소스코드 넣을 곳.

<!-- 최상단 구글 애드센스 코드 끝 -->

<!-- 본문좌측 구글애드센스 코드 -->
<div style="width:445px;height:278px;border:0px;margin: 10px 0 0 -50px;text-align:center;float:left">

// 소스코드 넣을 곳

</div>
<!-- 본문 좌측 구글 애드센스 코드 끝 -->

소스코드 넣을 곳 이라고 적은 곳에
구글 애드센스 스크립트를 복사 후 넣으시면 됩니다.

또한 소스코드에 있는 보라색이 보이시죠?
보라색으로 표시된 숫자값을 적절히 조정하며 맞춰주셔야 합니다.
스킨마다 본문사이즈가 모두 다르고, 구글애드센스 길이도 제 각각 다르기 때문에요~

위 사이즈를 적절히 조절하시어 맞추어 주시면 됩니다 ^^

완성된 화면은 아래처럼요~

결국 빈공간만 없애주면 모든게 해결되죠 ^^

※ 이 방법 외에도 수 많은 방법들이 또 있을 수 있습니다.
HTML 소스코드 라는게 딱히 정해진 정답이 있는건 아니다보니....

도움 되시면 좋겟네요~