[블로그] 본문 중간에 애드센스 광고 넣는 방법
본문 중간에 애드센스 광고 넣는 방법
다른 블로그를 구경하다 보면 본문 중간중간에 애드센스 광고를 넣은 블로그를 볼 수 있다.
글 중간에 생뚱맞게 넣어 보기 안 좋은 블로그도 있고 적절하게 배치하여 크게 이질감을 느끼지 못하는 블로그도 있는 등 심심치 않게 볼 수 있는데 이 사람들은 어떤 방식으로 광고를 넣었을까 하는 생각이 든다.
HTML을 잘 알거나 눈치가 빠른 사람은 알겠지만 본문에 광고를 넣는 방법은 사실 별거 없다.
단순히 내가 작성하는 중간에 애드센스 코드를 넣기만 하면 되는 것이기 때문인데 HTML을 잘 안다면 코드를 만들어 본인의 입맛에 맞게 넣을 수 있겠지만 일반적으로는 그렇게 하기도 힘들고 잘 모르기 때문에 그나마 쉽게 넣을 수 있는 방법 중 세 가지 정도를 소개하고자 한다.
(이번 포스팅은 본문 광고 관련 포스팅이라 중간 중간 광고를 한번 넣어 봤다.)
글쓰기의 외부컨텐츠를 이용하는 방법
우선 가장 단순한 방법은 티스토리 글쓰기 기능에 있는 외부컨텐츠를 이용하는 방법이다.
물론 HTML 편집으로 직접 넣어도 되지만 그거나 이거나 별차이는 없고, 굳이 HTML 편집으로 넘어갔다 일반 편집으로 넘어갔다 할 필요가 없기 때문에 가장 쉽게 광고를 넣을 수 있다.
티스토리 서식을 이용하는 방법
티스토리의 서식 기능을 이용하여 애드센스 광고에 관련된 서식을 만들고, 필요할 때마다 본문에 불러와서 광고를 넣는 방법이다.
이 방법은 처음 서식을 만들어야 하는 번거로움이 있지만, 어렵지도 않고 한번 만들어 두면 사용하기는 상당히 편한 방법이라고 볼 수 있다.
우선 서식을 만들어야 하는데 서식을 만드는 방법은 글쓰기에 들어간 뒤 제목 오른쪽에 있는 서식 부분에 체크하고 글을 발행하면 된다.
여기서는 애드 센스에 관련된 서식을 만들어야 하기 때문에 글쓰기에 들어간 뒤 HTML 체크를 하여 HTML 편집에서 애드센스 광고를 넣고 제목 옆에 서식 체크 후 발행하면 간단하게 완성할 수 있다.
서식을 만들었다면 이제 만들어진 서식을 넣으면 되는데 오른쪽 아래 서식 탭에서 작성한 서식을 선택하면 쉽게 넣을 수 있다.
HTML/CSS 편집에 코드를 생성하고 불러오는 방법
이 방법은 본문에 지속적으로 광고를 넣을 생각이라면 개인적으로 추천하는 방법이다.
이유는 위 두 가지 방법보다 조금 더 번거롭긴 하지만 만들어서 불러오는 코드만 넣어두면 수정이 필요한 경우 불러오는 부분만 변경하여 일괄 수정이 가능하고, 광고 자체를 제거하고 싶다면 일괄로 제거할 수 있으니 여러 가지로 좋다.
다만 해당 코드를 넣은 뒤 중간에 광고를 불러오지 않으면 HTML/CSS에 넣은 광고 코드 때문에 블로그 가장 아래에 광고가 나타난다는 점이 단점이라고 볼 수 있다.
우선 코드는 관리의 HTML/CSS 편집으로 들어가 제일 아래 부분의 </body> 위에 아래의 코드를 넣고 저장하도록 하자.
<div id = "adsense">
본인의 애드센스 코드
</div>
<script>
document.getElementById('ad').appendChild(document.getElementById('adsense'));
</script>
이제 본문에 넣기만 하면 되는데 넣는 방법은 위에서 소개한 방법대로 외부컨텐츠를 이용해도 좋고, 서식을 만들어서 넣어도 좋다.
HTML 형태로만 아래의 코드를 넣으면 된다.
<div id = "ad"></div>
애드센스 광고 넣는 방법 코드.txt여기까지 간단하게 해볼 수 있는 세 가지 방법을 소개 해 봤다.
본문 중간에 애드센스 광고를 넣는 방법은 이 외에도 더 다양하고 좋은 방법이 있지만, 생각보다 복잡하고 글이 길어질 수 있어 이번 포스팅에는 제외했으며 기회가 된다면 추가로 포스팅을 해볼 예정이다.
그 외 사용 관련 팁
광고 정렬
광고를 그냥 기본인 상태로 넣는다면 정렬이 되어있지 않을 것이다.
이런 경우 정렬을 하고 싶다면 추가로 코드를 넣어줘야 한다.
넣는 방법은 align="center" 를 <div> 부분에 추가해 줘야 하며 <div>가 없다면 위아래로 <div> </div> 를 추가로 넣어주면 된다.
사용 예)
<div id = "adsense" align="center">
애드센스 코드
<div>
광고의 간격 띄우기
광고가 본문에 있으면 어느 정도 구분을 위해 줄바꿈으로 구분을 할 수도 있지만 줄바꿈이 너무 많은 공간을 차지한다고 생각 된다면 CSS에 코드를 추가하여 간격을 줄 수도있다.
.adsbygoogle{margin:15px 0} 를 HTML/CSS에서 CSS탭에 추가해 주면 된다.