구글블로그 사용법: 애드센스를 본문 상단에 나란히 끼워 왼쪽 또는 오른쪽에 배치하는 방법 (플로팅 / 감싸기)

애드센스를 본문의 왼쪽이나 오른쪽에 끼워서 나란히 배치하는 경우를 흔히 볼 수 있다. 그렇게 하면 아무래도 효과가 높을 것 같고, 반면에 글을 읽는 데는 아무래도 거추장스러울 것 같다. 어쨋거나, 구글 블로그에서 아래 그림과 같이 배치하는 것은 가젯과 CSS를 통해 간단하게 할 수 있다.

아래 그림에서, 주황색으로 표시한 부분이 애드센스 광고이다.
애드센스 영역에 CSS를 주어 페이지 오른쪽에 배치하고, 그 왼쪽으로 본문이 따라 올라 오도록 한 것이다.

애드센스 본문과 나란히 배치하는 방법
방법은 아래와 같이 두 단계로 간단하다.

1. 애드센스 가젯 추가하기
=> 블로그 대시보드 > 레이아웃 (Layout) > 메인 (Main) 영역으로 간다
=> 가젯추가 (+ Add Gadget)를 통하여, 애드센스 가젯을 추가하거나, 또는 애드센스 코드를 담은 HTML 가젯을 추가한다. 이 때, 가젯을 블로그 포스트 (Blog Posts) 가젯 바로 위에 놓아야 한다.

2. CSS 코드 넣기
=> 위 그림에서 레이아웃 (Layout) 바로 아래에 있는 > 템플릿 (Template) > 사용자설정 (Customise) 을 선택하여 > 블로그 템플릿 디자이너 (Blogger Template Designer)를 연다
=> 왼쪽 메뉴바의 맨 아래에 있는 > 고급설정 (Advanced) > 열린 하위 메뉴에서 맨 아래에 있는 CSS추가 (Add CSS)를 선택하여 입력창을 연다

=> 아래의 코드를 복사하여 붙여 넣고, 위치와 수자를 조절한다
=> 저장 (Apply to blog)을 한다. 이로써 작업은 완료 되었다.
(CSS 코드 넣기에 대한 자세한 설명을 보려면 링크페이지 참조)

#HTML3 {
width: 336px;
float: right;
margin:30px 0px 10px 15px;
}

위의 코드는 첫 번째 그림에  본 예제를 만들 때 실제로 입력한 CSS의 모양이다.
1) #HTML3: 
예에서는 애드센스 가젯을 추가하지 않고, 애드센스 코드를 복사하여, HTML 가젯에 넣어 추가 하였으므로, 그 가젯 고유이름인 HTML3 를 지정한 것이다.
애드센스 가젯을 직접 추가하였다면, #AdSense1 과 같은 모양이 될 것이다.

2) width:
애드센스의 가로 너비를 지정한 것이다.

3) float:
애드센스 가젯을 왼쪽 오른쪽 가운데 어디에 놓을 것인가를 지정하는 것이다. 왼쪽에 놓으려면 left 라고 적고, 오른쪽에 놓으려면 right 라고 적어 주면 된다.

4) margin:
여백을 주어 나란히 올려 붙는 본문과 어울리게 조절한다. 숫자가 지정하는 위치는
" margin: 위쪽 여백 - 오른쪽 여백 - 아래쪽 여백 - 왼쪽 여백 " 순이다. 곧, 위에서 부터 시계 방향 이다.
위의 예제에서는 가젯을 오른쪽에 두었으므로, 가젯의 아래쪽과 왼쪽에 여백을 주었고, 따라 올라 오는 본문과 키를 맞추기 위해 위쪽여백을 주었다.


도움이 되기를 바랍니다.