티스토리에서 링크를 드롭다운 목록으로 보여주기의 업그레이드 포스트임. 이 포스트를 먼저 읽기를 권장함.
본 블로그에선 위의 포스트에서 설명한 방법과는 다소 다른 방법을 적용했다.
이제 정말로 이 방식을 설명함.
보면 알 수 있듯이 (그리고, 전술했듯이) 2가지 스타일의 목록을 사용한다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.
이렇게 두 가지 스타일의 목록을 적용하려면 아래와 같이 수정한다.
0. 사전 준비: 링크 목록 분류
먼저, 링크의 목록을 분류한다.
본 블로그에선 QAOS, 기술관련, 영화, 사회, 기타의 5 종류로 구분하여, 이들을 각각 1qa, 2te, 3mo, 4so, 5bl라고 명명했다.
본 블로그에선 QAOS, 기술관련, 영화, 사회, 기타의 5 종류로 구분하여, 이들을 각각 1qa, 2te, 3mo, 4so, 5bl라고 명명했다.
1. 이미지 준비
QAOS, TECH 등의 분류된 링크를 의미하는 이미지를 만든다.
참고로, 본 블로그에는 26x9 크기의 GIF 파일을 만들어 사용했다.
참고로, 본 블로그에는 26x9 크기의 GIF 파일을 만들어 사용했다.
2. 자바스크립트 코드 삽입
블로그 스킨의 헤더 내에 아래와 같은 코드를 삽입한다.
appendlink()는 link_* 로 시작하는 각 목록들을 구분해서 삽입한다.
(이 목록 이름은 뒤에 다시 설명함)
appendlink()는 link_* 로 시작하는 각 목록들을 구분해서 삽입한다.
(이 목록 이름은 뒤에 다시 설명함)
<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>
3. 글 보관함 스킨 수정
글 보관함의 소스는 아래와 같이 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.
위의 하일라이트된 부분을 아래와 같이 수정한다.
여기서 주목할 부분은 1행의 archievelist와 color, width.
archievelist는 위의 2.에서 설명한 archievelist이다.
color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
즉, 이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.
<s_sidebar_element>
<!-- 글 보관함-->
<div class="widget">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[#\#_archive_rep_link_##]">[#\#_archive_rep_date_##] </a>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>
위의 하일라이트된 부분을 아래와 같이 수정한다.
<select id="archivelist" onchange="document.location=options[selectedIndex].value;" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif;color:#2970A6;width:214px;">
<option value="">--- 기간 선택 ---</option>
<s_archive_rep>
<option value="[#\#_archive_rep_link_#\#]">[#\#_archive_rep_date_#\#] ([#\#_archive_rep_count_#\#])</option>
</s_archive_rep>
</select>
여기서 주목할 부분은 1행의 archievelist와 color, width.
archievelist는 위의 2.에서 설명한 archievelist이다.
color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
즉, 이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.
4. 링크 스킨 수정
링크의 소스는 아래와 같이 생겼다.
역시, 조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.
위의 하일라이트된 부분을 아래와 같이 수정한다.
여기서 주목할 부분은 표시한 행들.
link_1qa, link_2te 등은 링크를 분류한 것이다.
(전술했듯이) 총 5개의 목록으로 구분되어있고, 1qa_로 시작되는 링크는 link_1qa에, 2te_로 시작되는 링크는 link_2te에 삽입한다.
(3, 4, 5도 마찬가지다)
물론, 여기서도 color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
이 부분들 즉, 드롭다운 목록을 구분하거나 색 및 폭은 자신의 스킨에 맞게 수정해줘야 한다.
역시, 조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.
<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link" class="module">
<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>
위의 하일라이트된 부분을 아래와 같이 수정한다.
<img src="./images/bnl_ico_1qa.gif" align="absmiddle" width="26" height="9">
<select id="link_1qa" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- QAOSian 여러분 ---</option>
</select><br/>
<img src="./images/bnl_ico_2te.gif" align="absmiddle" width="26" height="9">
<select id="link_2te" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 기술 관련 사이트 ---</option>
</select><br/>
<img src="./images/bnl_ico_3mo.gif" align="absmiddle" width="26" height="9">
<select id="link_3mo" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 영화 세상 ---</option>
</select><br/>
<img src="./images/bnl_ico_4so.gif" align="absmiddle" width="26" height="9">
<select id="link_4so" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 사회에도 관심을 ---</option>
</select><br/>
<img src="./images/bnl_ico_5bl.gif" align="absmiddle" width="26" height="9">
<select id="link_5bl" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 좋은 분들 ---</option>
</select>
<s_link_rep>
<div style="display:none;">
<script type="text/javascript">
appendlink("[#\#_link_site_#\#]", "[#\#_link_url_#\#]");
</script>
</div>
</s_link_rep>
여기서 주목할 부분은 표시한 행들.
link_1qa, link_2te 등은 링크를 분류한 것이다.
(전술했듯이) 총 5개의 목록으로 구분되어있고, 1qa_로 시작되는 링크는 link_1qa에, 2te_로 시작되는 링크는 link_2te에 삽입한다.
(3, 4, 5도 마찬가지다)
물론, 여기서도 color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
이 부분들 즉, 드롭다운 목록을 구분하거나 색 및 폭은 자신의 스킨에 맞게 수정해줘야 한다.
5. 링크 제목 수정
지금까지 한 작업은 링크를 제목에 따라 각각의 위치에 삽입하는 방법이었다.
마지막으로 링크의 홈페이지 제목을 수정한다.
QAOS 팁'n텍, 순디자인연구소 등은 QAOS 카테고리에 들어갈 것이라 [1qa] QAOS 팁'n텍, [1qa] 순디자인연구소로 수정.
구차니의 잡동사니 모음은 technical 카테고리에 들어갈 것이라 [2te] 구차니의 잡동사니 모음으로 수정.
이런 식으로 모든 제목을 분류에 따라 수정한다.
마지막으로 링크의 홈페이지 제목을 수정한다.
QAOS 팁'n텍, 순디자인연구소 등은 QAOS 카테고리에 들어갈 것이라 [1qa] QAOS 팁'n텍, [1qa] 순디자인연구소로 수정.
구차니의 잡동사니 모음은 technical 카테고리에 들어갈 것이라 [2te] 구차니의 잡동사니 모음으로 수정.
이런 식으로 모든 제목을 분류에 따라 수정한다.
이렇게 수정하면 아래와 같은 모습을 볼 수 있다.
앞의 이미지 재활용. v^.^v
덧. 하경 님의 댓글을 참조해 일부 코드를 수정함 (2009. 10.25)
