인터넷 티스토리 사이드바에 구글 애드센스 넣기
2010.11.13 08:02
구글 애드센스 가입방법은 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="[##_rss_url_##]" onclick="window.open(this.href); return false" title="[##_title_##] 구독하기">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="[##_image_##]" alt="블로그 이미지" /></div> <div id="userID">[##_blogger_##]</div> <div id="blogDesc">[##_desc_##]</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> [##_category_##] </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="[##_rss_url_##]" onclick="window.open(this.href); return false" title="[##_title_##] 구독하기">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="[##_image_##]" alt="블로그 이미지" /></div> <div id="userID">[##_blogger_##]</div> <div id="blogDesc">[##_desc_##]</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"><!-- google_ad_client = "pub-1666436383844102"; /* 180x150, 작성됨 10. 11. 7 */ google_ad_slot = "7250541015"; google_ad_width = 180; google_ad_height = 150; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
</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> [##_category_##] </div> </div> <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div> </s_sidebar_element> |
혹시 저렇게 임의로 코드를 추가하면 사이드바 설정에 문제가 생기지 않을까 걱정되서 [사이드바 설정]을 확인해 봤습니다. 괜한 걱정을 했나 봅니다. 문제가 생기기는커녕 새로운 모듈형태로 추가되어 있었습니다.
뿐만 아니라 [구글 애드센스] 모듈을 사이드바에서 제거하면 [사용가능한 모듈]로 이동되었습니다.
구글 애드센스 뿐만 아니라 다른 모듈도 이런 형태로 만들어서 추가/제거 하면 관리하기가 편해질 거 같습니다.
댓글 0
| 번호 | 제목 | 날짜 | 조회 수 |
|---|---|---|---|
| 21 | 구글 애드센스 가입하기 | 2010.11.13 | 4487 |
| 20 | 네이버 로그인 기록 조회 | 2010.11.13 | 5245 |
| 19 | 무료-실명인증 내역 조회, 명의도용 확인하기 | 2010.11.13 | 5018 |
| » | 티스토리 사이드바에 구글 애드센스 넣기 | 2010.11.13 | 4490 |
| 17 | 구글 Analytics 사용하기 | 2010.11.13 | 5541 |
| 16 | 구글 Analytics 로 애드센스 수입 분석 | 2010.11.13 | 5543 |
| 15 | 구글 애드센스 공익광고를 다른 광고로 대체 | 2010.11.13 | 5619 |
| 14 | 영문 윈도우 한글 깨지는 현상 해결 방법 | 2010.11.25 | 7259 |
| 13 | I-PIN (아이핀) 발급 | 2010.11.25 | 5979 |
| 12 | 2011년도 정보처리산업기사, 정보처리기사 시험일정 | 2011.01.10 | 6238 |
| 11 | 정보처리기사 필기시험 2010년 9월 5일 - 기출문제 설명,해설(1번 ~ 10번) | 2011.01.10 | 6843 |
| 10 | 정보처리기사 필기시험 2010-9-5, 기출문제 설명,해설(11~ 20번) | 2011.01.10 | 7669 |
| 9 | 정보처리기사 필기시험 2010-9-5, 기출문제 설명,해설(21~ 30번) | 2011.01.10 | 6337 |