링크와 글보관함을 드롭다운 목록으로 보여주기

티스토리에서 링크를 드롭다운 목록으로 보여주기의 업그레이드 포스트임. 이 포스트를 먼저 읽기를 권장함.

본 블로그에선 위의 포스트에서 설명한 방법과는 다소 다른 방법을 적용했다.

이제 정말로 이 방식을 설명함.

보면 알 수 있듯이 (그리고, 전술했듯이) 2가지 스타일의 목록을 사용한다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.

이렇게 두 가지 스타일의 목록을 적용하려면 아래와 같이 수정한다.


0. 사전 준비: 링크 목록 분류

먼저, 링크의 목록을 분류한다.
본 블로그에선 QAOS, 기술관련, 영화, 사회, 기타의 5 종류로 구분하여, 이들을 각각 1qa, 2te, 3mo, 4so, 5bl라고 명명했다.

1. 이미지 준비

QAOS, TECH 등의 분류된 링크를 의미하는 이미지를 만든다.
참고로, 본 블로그에는 26x9 크기의 GIF 파일을 만들어 사용했다.

2. 자바스크립트 코드 삽입

블로그 스킨의 헤더 내에 아래와 같은 코드를 삽입한다.
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. 글 보관함 스킨 수정

글 보관함의 소스는 아래와 같이 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<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. 링크 스킨 수정

링크의 소스는 아래와 같이 생겼다.
역시, 조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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">&nbsp;
<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] 구차니의 잡동사니 모음으로 수정.
이런 식으로 모든 제목을 분류에 따라 수정한다.

이렇게 수정하면 아래와 같은 모습을 볼 수 있다.

앞의 이미지 재활용. v^.^v

덧. 하경 님의 댓글을 참조해 일부 코드를 수정함 (2009. 10.25)