본문 바로가기

Freenote

[블로그] skin.html부분

나중에 이 블로그의 스킨을 변경할 때 참고하기 위한 조립설명서.
>> 주의. 다른 사람이 코드를 그대로 사용할 경우 원하지 않는 결과가 있을 수 있음<<

0. 준비작업

- 지금 사용하고 있는 스킨을 저장해둔다.
- skin.html과 style.css을 메모장에 붙여넣어서 gulim, dotum이 나오는 부분을 모두 "맑은 고딕"으로 바꿔준다.
- style.css를 메모장에 옮기고 width를 검색해서 760까지 확장한다. 전체 길이도 맞추어 확장해준다.

1. 구글 웹마스터 도구 추가

<head>
<meta name="verify-v1" content="EpjqmaJQpZfTAHvn5m9B2c+0PMiLzPA5HPhvgvyCPwU=" />
<title> 내 제목 </title>
</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="&#xac80;&#xc0c9;" />
    </div>
    </form>
    <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;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>&#187;</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%

- 링크 모듈 부분에 사이즈 조절 문제 있음.

'Freenote' 카테고리의 다른 글

[블로그] 반성  (2) 2009.02.18
고담 코리아  (0) 2009.02.09
처칠과 교통경찰  (3) 2009.01.26
국가와 민족(미완성)  (1) 2009.01.20
경제만 살린다면  (4) 2009.01.20
담배연기로 부터의 자유  (7) 2009.01.18
민무신불립(民無信不立)  (0) 2009.01.11
글이 안써질때  (4) 2009.01.09
재미있는 블로그가 되고싶다  (5) 2009.01.09
Notice (090101)  (0) 2009.01.07