이전에 작성한 글이 있는데 스킨 수정에 어려움을 겪고 있는 분들을 위해 비교적 쉽게 정리하겠습니다.
사이드바의 링크나 글 보관함 , 또는 추가적으로 링크를 추가하실때 사용하시면 좋은 팁입니다.
참고로 아래 참고사이트를 링크했고 제가 사용할때는 이정도만 하면 head부분에 자바스크립트 추가 없이 html 수정만으로 사용할수 있습니다.

혹시 안되시거나 하시면 댓글 바랍니다.
사이드바의 html 은 대략 이렇습니다.

링크 모듈 수정하기

<s_sidebar_element><!-- 링크 -->
	<div class="link">
		<h3>링크</h3>
		<ul>
			<s_link_rep>
				<li>
					<a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false">[#\#_link_site_#\#]</a>
				</li>
			</s_link_rep>
		</ul>
	</div>
</s_sidebar_element>

위의 강조된 부분을 아래처럼 수정합니다.

<s_sidebar_element><!-- 링크 -->
	<div class="link">
		<h3>링크</h3>
		<ul>
			<select id="link_1" onchange="window.open(this.value);" style="font: 12px NanumGothic,Verdana,Helvetica,Arial,Gulim,sans-serif; color: rgb(51, 51, 51); width: 200px;">
				<option value="">--- 블로그 이웃 ---</option>
				<option value="http://demun.tistory.com">▶대문블로그 </option>
			</select>
			<select id="link_2" onchange="window.open(this.value);" style="font: 12px NanumGothic,Verdana,Helvetica,Arial,Gulim,sans-serif; color: rgb(51, 51, 51); width: 200px;">
				<option value="">--- 링크 ---</option><option value="http://demun.tistory.com/category/블로그/스킨수정">▶ 스킨 수정팁 </option>
			</select>
			<s_link_rep>
				<div style="display: none;">
					<script type="text/javascript">
					appendlink("[#\#_link_site_##]", "[#\#_link_url_##]");
					</script>
				</div>
			</s_link_rep>
		</ul>
	</div>
</s_sidebar_element>


width, color...등등은 본인이 원하는것으로 수정해도 됩니다.
그럼 아래처럼 변경됩니다.



글 보관함 모듈 수정하기.

글보관함을 드롭다운 메뉴로 만들어보겠습니다.
대략 아래와 같은 형식입니다.

<s_sidebar_element><!-- 글 보관함 -->
	<div class="archive">
	<h3>글 보관함</h3>
		<ul>
			<s_archive_rep>
				<li>
				<a href="[#\#_archive_rep_link_##]">[#\#_archive_rep_date_##] </a>
					<span class="cnt">([#\#_archive_rep_count_##])</span>
				</li>
			</s_archive_rep>
		</ul>
	</div>
</s_sidebar_element>

위의 하이라이팅 된 부분을 아래처럼 수정해줍니다.

<s_sidebar_element><!-- 글 보관함 -->
	<div class="archive">
	<h3>글 보관함</h3>
		<ul>
			<select id="archivelist" onchange="document.location=options[selectedIndex].value;" style="font: 12px NanumGothic,Verdana,Helvetica,Arial,Gulim,sans-serif; color:#2970A6; width:200px;">
			<option value="">--- 기간 선택 ---</option>
			<option value="[#\#_archive_rep_link_##]">[#\#_archive_rep_date_##] ([#\#_archive_rep_count_##])</option>			
			</select>
		</ul>
	</div>
</s_sidebar_element>

마찬가지로 width, color 등등은 본인의 스킨에 맞게 변경해주시면 더욱 좋습니다.
수정을 하시면 아래처럼 됩니다.



한가지 팁.

h3 부분이 제목에 해당하는 부분입니다. 이부분도 좀더 수정을 하면 즉, 배경을 넣은다든가, 롤오버효과를 줄수도 있습니다.
대략 이런식이죠.

#sidebar h3{
	background:url(./images/이미지파일) repeat-x;
	width:190px; //h3에 해당하는 너비
	height:40px;
	padding:0 20px; //h3에 해당하는 제목의 간격조절
	font:18px/40px Georgia bold;
	color:#fff; //배경이 어두울경우 밝은색 글꼴색깔
}
// 롤오버 효과를 줍니다.
#sidebar h3:hover{
	background:url(./images/이미지파일) repeat-x;
	width:190px; 
	height:40px;
	padding:0 20px;
	font:18px/40px Georgia bold;
	color:#333;
}

위에서 repeat-x 는 height:40 이기 때문에 높이가 맞는 이미지 즉 이미지가 5*40 짜리 이미지를 만드신후 업로드후에 그걸 사용하는겁니다.
즉 옆으로 반복한다는 의미입니다.
font의경우 위에서 지정하면 아래(hover)에서는 지정을 안해줘도 되지만 혹시 바꾸실려면 바꾸시라고 예제로 올려봅니다.
설명하자면 이렇습니다.
background:이미지주소, x축으로 반복.
width:너비
height:높이
padding:간격(순서는 위,오른쪽,아래,왼쪽)
폰트크기와 색깔순서입니다.
h3 부분에 마우스 롤오버 효과를 적용하면 대략 아래처럼 됩니다.



좀더 자세한것은 아래의 관련글 링크에 다 있습니다. 중복이라 여기까지만 하겠습니다.
참고사이트 : http://zoc.kr/

댓글

  1. 2010.06.02 14:55 신고 BlogIcon 전형걸  댓글주소  수정/삭제  댓글쓰기

    와우~ 정말 필요한 것이었는데 꼭 따라해 봐야겠어요...
    근데 왜 이렇게 어려운지... -.-;;
    앞으로 종종 들러 도움 여쭐께요... ㅋ

    -뿌쌍-

  2. 2010.06.02 16:05 신고 BlogIcon 재아  댓글주소  수정/삭제  댓글쓰기

    좋은 팁입니다.^^

  3. 2011.10.18 13:18 신고 BlogIcon Rsha  댓글주소  수정/삭제  댓글쓰기

    네이버 블로그에서 티스토리 블로그로 옮기는 중인데 대문님 블로그에서 많이 배우고 갑니다^^

  4. 2011.10.20 21:35 신고 BlogIcon Rsha  댓글주소  수정/삭제  댓글쓰기

    초보가 또 다시 댓글을 남겨서 좀 민망하네요^^; 글 보관함 수정을 해보니까 목록이 ()으로 나오더라고요. 왜 이런지 혹시 알 수 있을까요??
    ///그리고 링크에 있는 주소요.
    11번째 줄에 있는 "http://demun.tistory.com/category/블로그/스킨수정" 을 "http://demun.tistory.com/category/DESIGN/스킨수정팁" 으로 수정해야해요^^

    • BlogIcon 대문 demun 2011.10.21 21:48 신고  댓글주소  수정/삭제

      "http://demun.tistory.com/category/DESIGN/스킨수정팁" 으로 수정해야해요^^........ 라고 한것은 이전에 카테고리하고 지금의 카테고리하고 변경이 되서 그런겁니다.

      그리고 목록이 () 으로 나온다고 하는데요. 다시 한번 잘 보고 따라해보세요.
      제가 지금 하이라이트를 이전처럼 했으니까요. 변경된 부분을 잘 보고 해보세요. 될겁니다.

    • BlogIcon 대문 demun 2011.10.21 21:51 신고  댓글주소  수정/삭제

      만약 똑같이 했는데 안된다면 html 에서 </head> 위에 아래의 코드를 넣어보세요.


      <script type="text/javascript">
      //<![CDATA[
      //링크 추가
      function appendlink(linkname, linkurl){
      if (/^\[...\]/.test(linkname))
      {
      var opt = document.createElement("option");
      document.getElementById("link_"+linkname.substr(1,3)).options.add(opt);
      opt.text = linkname.substr(5);
      opt.value = linkurl;
      }
      else
      {
      var opt = document.createElement("option");
      document.getElementById("link_5bl").options.add(opt);
      opt.text = linkname;
      opt.value = linkurl;
      }
      }
      //]]>
      </script>

  5. 2011.10.29 22:31 신고 BlogIcon Redever  댓글주소  수정/삭제  댓글쓰기

    적용하다보니 <s_archive_rep> 부분이 빠져 있어서 그런 것 같은데요.
    07번 라인에 <s_archive_rep>
    09번에 </s_archive_rep> 을 넣었더니 잘 작동합니다.
    코드하이라이터에서 07,09번은 빈 줄로 보이네요 ^^

  6. 2012.03.31 21:42 신고 BlogIcon 류생  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 제 블로그에 바로 적용했습니다.