사이드바 링크 드롭다운 메뉴로 깔끔하게 정리하기

demun
티스토리스킨수정/사이드바
2010. 6. 2. 14:31

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

참고

이미지 처리하는 방법(확장자)
이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
이미지 처리하는 방법(Image Replacement , Image Sprite)
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
사이드바에 더보기 기능 적용하기
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
사이드바에 더보기 기능 적용하기

개 개

demun(대문블로그)