구글 애드센스 본문 상단에 두개씩 나란히 가운데 정렬하기

구글 광고 2개가 나란히 나오는 모습

 

어제 Goolge Adsense를 다시 달았습니다. 이전에 있던 계정은 이미 단가가 떨어질 때로 떨어져, 탈퇴 후 재가입하면 기존 단가를 유지할 수 있다 하여 날름 계정취소를 했다죠. 계정취소 및 신청은 구글 도움말에 자세히 설명돼 있으니 참고하세요 :)

 

사실 저도 HTML 코드와 관련해선 자잘한 수정 정도만 할 줄 아는 매우 기초적인 수준이기 때문에, 스킨 꾸미는데도 적지 않은 시간이 소요됐습니다. 이것저것 해보고 혼자 연구해 보니 조금씩 늘긴 합니다.

 

마침 250*250 혹은 300*300 사이즈의 구글 광고 두 개를 본문 상단에 가운데 정렬로 삽입하려고 <div>구글광고</div> 형식으로 입력했더니 이런... 세로로 정렬돼서 나오네요. 하지만 역시 구글신은 절 배신하지 않았습니다. 즐거운하루님 블로그와 그 외 여러 가지 사이트를 통해 방법을 알아냈는데요, 의외로 간단합니다. 이미 많은 분이 알고 계시겠지만, 기록차 포스팅 해봅니다.

 

방법 1 - table 태그 활용

---

아래처럼 추가하면 본문 상단에 250*250(혹은 300*300 등) 광고 두 개가 나란히 나오면서 가운데 정렬이 됩니다. width 속성 값(본문폭)은 각자 스킨에 맞는 값으로 수정하시면 됩니다. 저는 "630"으로 설정했습니다. 

<table width="본문폭" border="0">
  <tr>
    <td align="center">구글 좌측 광고</td>
    <td align="center">구글 우측 광고</td>
  </tr>
</table>

 

가운데 정렬이 싫다면 <td> 태그의 align 속성 값을 각각 "left", "right"로 변경해주세요.

<table width="630" border="0">
  <tr>
    <td align="left">구글 좌측 광고</td>
    <td align="right">구글 우측 광고</td>
  </tr>
</table>

 

구글 광고와 본문 사이에 간격을 주고 싶다면 </table> 태그 뒤에 <div><br /></div> 태그를 추가하시면 됩니다. 두 칸을 띄우고 싶다면 <br /> 태그를 하나 더 추가하면 됩니다. 

<table width="630" border="0">
  <tr>
    <td align="center">구글 좌측 광고</td>
    <td align="center">구글 우측 광고</td>
  </tr>
</table>
<div><br /></div>

 

방법 2 - float 활용

---

width 속성 값(본문폭)은 스킨에 따라 적절히 수정해 주세요.

<div style="overflow: hidden; width: 본문폭; margin: 10px 10px 20px 10px">
  <div style="float: left">광고 코드 A</div>
  <div style="float: right">광고 코드 B</div>
</div>

 

관련 글

---

온라인 광고 업체 및 티스토리 위치별 광고 삽입 방법 정리