구글 애드센스 가입방법은 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>
분류 전체보기 (512)
최신 소식 (52)
설치,다운로드 (2)
사용팁 (24)
DB 업데이트 (123)
프로그램 분석 (38)
프로그램 제거툴 (42)
키움증권 (3)
일반 (117)
전화번호(스팸성) (21)
티스토리,애드센스 (25)
정보처리기사 (7)
인터넷 (19)
윈도우즈 팁 (12)
윈도우즈 드라이버 (1)
자료실 (27)
스터디 (76)
C#.NET:시리얼통신 (5)
C#.NET:자료 (57)
C, C++ 언어 (8)
MFC 테트리스 (6)
고전&최신게임 (3)
L4D2 (3)
로블록스 제작 (1)
</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”><!–
구글코드
</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>
분류 전체보기 (512)
최신 소식 (52)
설치,다운로드 (2)
사용팁 (24)
DB 업데이트 (123)
프로그램 분석 (38)
프로그램 제거툴 (42)
키움증권 (3)
일반 (117)
전화번호(스팸성) (21)
티스토리,애드센스 (25)
정보처리기사 (7)
인터넷 (19)
윈도우즈 팁 (12)
윈도우즈 드라이버 (1)
자료실 (27)
스터디 (76)
C#.NET:시리얼통신 (5)
C#.NET:자료 (57)
C, C++ 언어 (8)
MFC 테트리스 (6)
고전&최신게임 (3)
L4D2 (3)
로블록스 제작 (1)
</div>
</div>
<div class=”boxBtmR”><div class=”boxBtm-left”></div><div class=”boxBtm-mid”></div><div class=”boxBtm-right”></div></div>
</s_sidebar_element>
사이드바 설정
혹시 저렇게 임의로 코드를 추가하면 사이드바 설정에 문제가 생기지 않을까 걱정되서 [사이드바 설정]을 확인해 봤습니다. 괜한 걱정을 했나 봅니다. 문제가 생기기는커녕 새로운 모듈형태로 추가되어 있었습니다.
뿐만 아니라 [구글 애드센스] 모듈을 사이드바에서 제거하면 [사용가능한 모듈]로 이동되었습니다.
구글 애드센스 뿐만 아니라 다른 모듈도 이런 형태로 만들어서 추가/제거 하면 관리하기가 편해집니다.