구글 애드센스 가입방법은 http://pcsak3.com/121 를 참조하십시오
사이드바
홈페이지 본문의 좌측 또는 우측에 메뉴, 카운터가 있는 것을 사이브바라고 합니다. 티스토리 사이드바에 구글애드센스를 넣는 방법을 알아보겠습니다.
사이드바 플러그인 위치 확인
[관리자페이지] 에서 [스킨] => [HTML/CSS 편집]으로 들어갑니다. Skin.html 과 style.css 2개로 구분되어 있는데 skin.html 을 편집할 것입니다.
사이드 바의 시작부분을 찾기 위해서 Ctrl + F 를 눌러 "<!-- 기본 사이드바 -->" 또는 "<!-- 블로그 설명 모듈 -->"를 검색합니다. 레이아웃마다 이름이 조금씩 다를수 있으므로 주의하셔야 합니다.
사이드바에 추가
참고로 제 블로그는 "블로그 설명 모듈", "카테고리 모듈" 순서로 되어 있어서 skin.html 이 이런식으로 되어 있었습니다.
|
<!-- 기본 사이드바 --> <s_sidebar_element> <!-- RSS 링크 --> <div id="btnRSS"><a href="https://whiteat.tistory.com/rss" onclick="window.open(this.href); return false" title="PC 싹쓸이 구독하기">RSS FEED</a></div> </s_sidebar_element> <s_sidebar_element> <!-- 블로그 설명 모듈 --> <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div> <div class="boxMidR"> <div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/19072A4A4D30C8282A" alt="블로그 이미지" /></div> <div id="userID">WhiteAT</div> <div id="blogDesc">PC에 관련 모든 자료들</div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element>
<!—여기에 구글 애드센스 코드를 넣으면 됩니다. 하지만 그냥 넣으면 모양이 없이 출력되서 보기에 좋지 않습니다. -->
<s_sidebar_element> <!-- 카테고리 모듈 --> <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div> <div class="boxMidR"> <div id="category"> <h3 class="stitle">카테고리</h3> </div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element> |
카테고리 모듈의 <s_sidebar_element> 부터 </s_sidebar_element> 까지 그대로 복사하여 div 부분만 교체해서 아래와 같이 하였습니다..
|
<!-- 기본 사이드바 --> <s_sidebar_element> <!-- RSS 링크 --> <div id="btnRSS"><a href="https://whiteat.tistory.com/rss" onclick="window.open(this.href); return false" title="PC 싹쓸이 구독하기">RSS FEED</a></div> </s_sidebar_element> <s_sidebar_element> <!-- 블로그 설명 모듈 --> <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div> <div class="boxMidR"> <div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/19072A4A4D30C8282A" alt="블로그 이미지" /></div> <div id="userID">WhiteAT</div> <div id="blogDesc">PC에 관련 모든 자료들</div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element>
<s_sidebar_element> <!-- 구글 애드센스-->
<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div> <div class="boxMidR"> <div id="google_left"> <script type="text/javascript"><!-- 구글코드
</div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element>
<s_sidebar_element> <!-- 카테고리 모듈 --> <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div> <div class="boxMidR"> <div id="category"> <h3 class="stitle">카테고리</h3> </div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element> |
사이드바 설정
혹시 저렇게 임의로 코드를 추가하면 사이드바 설정에 문제가 생기지 않을까 걱정되서 [사이드바 설정]을 확인해 봤습니다. 괜한 걱정을 했나 봅니다. 문제가 생기기는커녕 새로운 모듈형태로 추가되어 있었습니다.
뿐만 아니라 [구글 애드센스] 모듈을 사이드바에서 제거하면 [사용가능한 모듈]로 이동되었습니다.
구글 애드센스 뿐만 아니라 다른 모듈도 이런 형태로 만들어서 추가/제거 하면 관리하기가 편해집니다.
'일반 > 티스토리,애드센스' 카테고리의 다른 글
| 2010년도 티스토리 탁상달력 (0) | 2010.12.31 |
|---|---|
| 12월 티스토리 초대장 배포합니다. (09장) - 마감 (45) | 2010.12.27 |
| 구글 애드센스 공익광고를 다른 광고로 대체 (2) | 2010.11.13 |
| 구글검색 결과 미리 보기 제공 (2) | 2010.11.13 |
| 구글 Analytics 로 애드센스 수입 분석 (0) | 2010.11.12 |
| 구글 Analytics 사용하기 (2) | 2010.11.12 |
| 구글 애드센스 가입하기 (0) | 2010.11.08 |
| 블로그에 글쓰기 (0) | 2010.10.23 |
| 티스토리 초대장 배포 방법 (5) | 2010.10.22 |
| MS office 2010 으로 티스토리 게시물 쓰기 (2) | 2010.10.22 |