[블로그] skin.html부분
나중에 이 블로그의 스킨을 변경할 때 참고하기 위한 조립설명서.
>> 주의. 다른 사람이 코드를 그대로 사용할 경우 원하지 않는 결과가 있을 수 있음<<
0. 준비작업
- 지금 사용하고 있는 스킨을 저장해둔다.
- skin.html과 style.css을 메모장에 붙여넣어서 gulim, dotum이 나오는 부분을 모두 "맑은 고딕"으로 바꿔준다.
- style.css를 메모장에 옮기고 width를 검색해서 760까지 확장한다. 전체 길이도 맞추어 확장해준다.
1. 구글 웹마스터 도구 추가
<head>2. 왼쪽 사이드바 모듈
a. 구글 검색모듈 추가
<s_sidebar_element><!-- 구글검색 모듈 -->
<form action="http://www.google.com/cse" id="cse-search-box">
<div style="text-align:center">
<input type="hidden" name="cx" value="partner-pub-9121974271558254:xmub89-qfsh" />
<input type="hidden" name="ie" value="EUC-KR" />
<input type="hidden" name="ie" value="utf-8" />
<input type="text" name="q" size="14" />
<input type="submit" name="sa" value="검색" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ko"></script>
</s_sidebar_element>
- <div style="text-align:center">이 코드는 검색창의 위치를 중앙으로 정렬시킨다.
- <input type="hidden" name="ie" value="EUC-KR" /> <input type="hidden" name="ie" value="utf-8" /> 이 코드는 한글을 사용해도 깨지지 않도록 한다.
- <input type="text" name="q" size="14" /> 창의 크기를 결정해준다.
b. RSS 모듈
<s_sidebar_element>
<!-- RSS 모듈 -->
<div style="text-align:center">
<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Farmishel.tistory.com%2Frss" title="한RSS에 추가"><img src="http://static.hanrss.com/images/add_to_hanrss7.gif" border="0" /></a>
</div>
</s_sidebar_element>
- <div style="text-align:center">이 코드는 RSS 추가 버튼의 위치를 중앙으로 정렬시킨다.
- 한rss 참고.
c. 링크 모듈
<s_sidebar_element><!-- 링크 모듈 -->
<div id="link" class="sbarList">
<h3>Link<span>»</span></h3>
<select onchange="window.open(this.value);" style=font-family: "맑은 고딕"; font-size: 10px; width: 150px;">
<option><font face="맑은 고딕"> 블로그 링크 </font></option>
<option value="http://homa.egloos.com">굽시니스트님 </option>
<option value="http://felicity.tistory.com/">다니엘강님 </option>
<option value="http://j4blog.tistory.com/">j4blog님 </option>
<option value="http://blog.naver.com/mdkdk/">석모도주님 </option>
<option value="http://blog.daum.net/vanuatu/">선군님 </option>
<option value="http://blogyam.tistory.com/">블로그얌 </option>
<option value="http://grim1980.vsix.net/">이사무님 </option>
<option value="http://pennyway.net/">페니웨이님 </option>
<option value="http://www.shogi.wo.to/">Jino님 </option>
</select>
</div>
</s_sidebar_element>
</s_sidebar>
- 원래 있었던 링크 모듈을 대체해주어야 한다.
3. 애드센스 세로광고 모듈
<s_sidebar_element><!-- 애드센스 세로 -->
<script type="text/javascript">
<!--
google_ad_client = "pub-9121974271558254";
/* 160x600, 작성됨 08. 5. 5 */
google_ad_slot = "7063639296";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<div style="text-align:center">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</s_sidebar_element>
- <div style="text-align:center">이 코드는 검색창의 위치를 중앙으로 정렬시킨다.
- <!-- --> 이 안의 내용들은 주석문이므로 수정해도 의미가 없다.
4. 애드센스 가로광고 모듈
<div class="entry"><script type="text/javascript"><!--
google_ad_client = "pub-9121974271558254";
/* 애드센스 가로 광고 */
google_ad_slot = "5359364741";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<div style="text-align:center">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="titleWrap">
- <div class="entry"> 와 <div class="titleWrap"> 사이에 가로광고 코드를 붙여 넣는다.
- <div style="text-align:center">는 가로광고 모듈을 가운데로 위치시킨다.
5. 구글 어날라이즈 추적코드 삽입
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-4365695-1"); pageTracker._trackPageview(); } catch(err) {}</script>- 마지막의 </body> 앞부분에 삽입한다.
6. 스킨 상단조절
- 이 스킨에서 상단 블로그 메뉴는 글이 아니라 별도의 그림파일로 저장되고 있고 각각의 가로길이도 다르다.- 80x25의 gif파일로 대체해줘야 한다.
- 검은색 바탕에 2.11 x 0.66 사이즈 텍스트 박스에 Trebuchet MS폰트로 크기는 10. 굵게 작성. 회색 30%
- 링크 모듈 부분에 사이즈 조절 문제 있음.
invalid-file
invalid-file