티스토리에서 링크를 드롭다운 목록으로 보여주기

이미 많은 분들이 사용하시고 있고, 방법도 알려질만큼 알려졌다고 생각했는데, 의외로 물어보시는 분들이 많았다.
나도 배워서 쓰는 것이라 가급적 포스팅은 하지 않으려고 했는데, 질문이 좀 많이 들어와 걍 포스팅함.

블로그 스킨에서 사이드바를 가볍게 유지하는 것은 모든 블로거의 꿈이요 소망이다.
너무 많은 정보를 담으면 보기가 싫고, 너무 정보가 없으면 접근성이 부족하고...

글 보관함과 링크를 관리하는데 내가 선택한 것은 다름 아닌 드롭다운 목록.

바로 이것이긴 한데, 여기선 좀 더 단순한 방식을 설명함.

위 캡쳐 화면에선 2가지 스타일의 목록을 사용했다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.

하지만, 본 포스트에서는 링크를 하나의 목록에 저장하는 방법을 설명한다.

링크를 드롭다운 목록으로 보여주려면 아래와 같이 수정한다.

링크의 소스를 찾는다. 보통 아래와 비슷하게 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<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>

위의 하일라이트된 부분을 아래와 같이 수정한다.

<select id="linklist" onchange="document.location=options[selectedIndex].value;" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif;color:#2970A6;width:214px;">
<option value="">--- 링크 목록 ---</option>
<s_link_rep>
<option value="[#\#_link_url_#\#]">[#\#_link_site_#\#]</option>
</s_link_rep>
</select>

여기서 주목할 부분은 표시한 1행.

color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.

이렇게 수정하면 훨씬 깔끔한 링크 목록을 볼 수 있다.

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