티스토리 블로그는 하나하나 수정하는 재미가 있다. 하지만 블로거의 스타일대로 꾸미는 것이 쉽지만은 않다. 더불어 블로그에 포스팅 하면서 수익창출을 하기 위한 준비하는것 또한 중요한 일이다. 지난글에서 홈화면과 본문에 플러그인을 이용해서 광고를 달았거, HTML/CSS 편집을 이용해서 사이드 바에 광고를 달아 보았다. 이번에는 HTML/CSS 편집을 이용해서 본문에 광고를 다는 방법에 대해 알아보자
티스토리 본문에 구글 애드센스 광고 달기
티스토리 본문에 구글 애드센스 광고 달기
필자는 현재 티스토리 블로그 본문에 광고를 여러개 노출시키고 있다. 광고는 본문 상단, 중간, 하단, 사이드바, 홈화면에 노출시키고 있다. 플러그인을 이용해서 본문 상단, 하단에 노출시키고 있고, 중간에는 글을 작성하면서 코드를 삽입하고 있다. 사이드바와 홈화면은 이전 포스팅의 방법을 이용해서 광고를 삽입하였다.
이 광고는 플러그인을 이용한 상단배치광고 화면 출력모습이다.
플러그인을 이용한 하단배치 광고 화면 출력 모습이다.
이것은 본문을 작성하면서 글의 적정부문에 코드를 삽입하여 나타나는 광고 모습이다.
이번 포스팅에서는 HTML/CSS편집을 이용해서 하단에 광고 3개를 더 추가해보려 한다. 본문에 광고를 달기위해서는 애드센스에서 광고단위부터 새로 만들어야 한다. 구글 애드센스에서 광고단위 만드는 방법은 이전 작성한 글을 참고하면 된다.
광고를 어떻게 배치하는냐에 따라 광고단위를 선택해야 한다. 필자는 블로그 본문하단에 반응형광고와 중형직사각형(300x250) 2개의 광고를 배치하려한다. 배치계획에 맞게 광고단위를 만들어 보자.
광고단위를 만들었으면 이제는 본문에 삽입이 가능하도록 코드를 만들어야 할 차례이다.
코드는 지난번 사이드바에 구글 애드센스 광고 달기 코드를 조금 변형해서 사용해보자. 변형이라기보다 구글 애드센스 코드 앞뒤에 <div> ~ </div> 만 복사해서 붙여넣기 하면 된다.
본문 하단에 반응형 드센스 광고 코드 삽입.txt
그리고 본문하단에 중형직사각형 2개의 코드를 만들어 보자. 첨부된 코드에 구글 애드센스에서 생성된 코드를 복사해서 붙여넣으면 된다.
지난번 티스토리 홈화면에 광고를 배치했던 코드형태를 그대로 사용하였다.
HTML/CSS를 클릭하여 이동해보자. 티스토리 블로그를 하다보니 이제는 HTML/CSS편집이 어느정도 익숙해졌다.
Ctrl+F(검색)해서 ##_article_rep_desc_## 을 찾는다. ##_article_rep_desc_## 하단에 지난번에 삽입하였던 SNS 공유링크 아이콘이 보인다.
##_article_rep_desc_##을 기준으로 위쪽에 붙이면 본문 중앙에 광고코드가 삽입이되고, ##_article_rep_desc_##의 하단에 입력하면 하단에 광고가 삽입이 된다. 필자는 SNS공유링크 하단에 추가할 3개의 애드센스 광고코드를 삽입하였다.
광고코드를 입력하였으면 저장을하고, 광고코드가 잘 적용이 되었는 확인할 차례이다. 정상적으로 광고모듈이 나오는지 확인해보자. 아래 그림은 위의 코드를 이용해서 본문 하단에 배치한 광고의 화면 출력 모습니다. 필자가 원하던데러 SNS 공유링크 아래에 광고가 삽입되었다.
광고를 적절한 위치에 배치하는 것은 각자의 취향에 따라서 하면된다. 지금까지 티스토리 본문에 구글 애드센스광고 코드 삽입방법에 대해 알아보았다.
광고삽입 관련 글
2017/12/03 - [티스토리 꾸미기] - 티스토리 홈화면에 애드센스 광고 다는 방법
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요!
'B7 블로그 > 티스토리' 카테고리의 다른 글
| 티스토리 서식 등록 및 활용방법 (10) | 2018.01.01 |
|---|---|
| 티스토리 블로그 로딩 이미지 넣는 방법 (10) | 2017.12.26 |
| 티스토리 사이드바에 구글 애드센스 광고 달기 (0) | 2017.12.06 |
| 티스토리 FastBoot 반응형 스킨 최근포스트 모듈 썸네일 오류 해결 방법(RSS공개) (0) | 2017.12.04 |
| 티스토리 FastBoot 스킨 로그아웃 오류 해결 방법 (0) | 2017.12.04 |
