티스토리 모바일에 광고 넣기... 서식활용

어제 티스토리 모바일에 광고 넣기에 이어, 오늘은 내가 사용하는 방식을 소개합니다.

서식만들기 (내가 사용하는 서식입니다.)

가운데 영역은 나중에 자바스크립트로 PC 버전에서는 감출 것입니다.

서식만들기 동영상

붙여넣기 한 내용은 아래와 같습니다.

<!-- 광고 (상단) -->
<div id="google-ad-top" style="border: 1px solid #000; margin: 0 auto 20px; min-height: 250px; overflow: hidden; word-wrap: break-word;">
  <script type="text/javascript" src="URL/AdsenseTop.js"></script>
</div>
<!-- // 광고 (상단) -->

여기에 글쓰기

<!-- 광고 (중간) -->
<div id="google-ad-middle" style="border: 1px solid #000; margin: 15px auto; min-height: 50px; overflow: hidden; word-wrap: break-word;">
  <script type="text/javascript" src="URL/AdsenseMiddle.js"></script>
</div>
<!-- // 광고 (중간) -->

여기에 글쓰기

<!-- 광고 (하단) -->
<div id="google-ad-bottom" style="border: 1px solid #000; margin: 20px auto 0; min-height: 60px; overflow: hidden; word-wrap: break-word;">
  <script type="text/javascript" src="URL/AdsenseBottom.js"></script>
</div>
<!-- // 광고 (하단) -->
<!-- googleAnalytics -->
<script type="text/javascript" src="URL/googleAnalytics.js"></script>
<!-- // googleAnalytics -->

id 값은 javascript에서 border: 1px solid #000 를 제거하기 위해 사용합니다.

border: 1px solid #000 가 없으면 글 작성시 어디까지가 광고가 나올 영역인지 구분이 안돼

종종 광고 나올 영역을 제거하게 됩니다. 

URL/ 은 南無님 글 처럼 티스토리에 upload하여 그 주소를 사용해도 되고

저처럼 별도의 서버에 upload하여 그 주소를 사용해도 됩니다.

밤이 늦어

AdsenseTop.js, AdsenseMiddle.js, AdsenseBottom.js 의 내용은 다음에 계속 하겠습니다.

위에 붙여 넣기한 소스를 보면 아래과 같은 내용이 있습니다.

이것은 구글 웹로그 분석 소스로

본문에 삽입한 이유는 모바일에서 접속한 경우도 분석하기 위해서 입니다.

<!-- googleAnalytics -->
<script type="text/javascript" src="URL/googleAnalytics.js"></script>
<!-- // googleAnalytics -->

서식 사용하기

[계속...]

---

20130725

지금은 위에서 소개한 내용을 바탕으로

서식과 관련 자바스크립트 파일을 자동으로 생성하는 프로그램을 만들어 이용하고 있다.

2013/07/14 - [블로그] - 티스토리에 삽입할 애드센스 코드와 서식 생성하기

2013/07/23 - [블로그] - 티스토리 서식과 애드센스 코드 생성 - 사용법(1/2)

2013/07/23 - [블로그] - 티스토리 서식과 애드센스 코드 생성 - 사용법(2/2)

2013/07/20 - [블로그] - 애드센스 광고 시험 - PC 상단 좌측 1개, 중간 우측 1개, 하단 중앙 1개 / 모바일은 상,중,하

2013/07/23 - [블로그] - 애드센스 광고 시험 - PC 상단 2개, 하단 중앙 1개 / 모바일은 상,중,하