링크를 깔끔하게 정리하자 - 링크를 접었다 폈다(오류수정)

블로그들을 보면 사이드바 메뉴에 링크 항목이 있습니다  처음엔 링크 목록이 몇개 안 되기 때문에 그리 부담이 되지는 않지만, 링크수가 하나 둘씩 늘어 갈수록 점점 공간도 많이 차지하게 되고, 지저분하게 됩니다

제 블로그를 보면 이런 링크를 적은 공간에서 효율적으로 관리하기 위해 접었다 펼 수 있게 설치를 해 놓았습니다  이번 포스트는 이 방법에 관해 포스팅을 할까 합니다

제 블로그의 링크 목록입니다  3가지로 나누어서 분류를 해 놓았습니다  이 방법은 코드를 직접 수정을 해야 함으로 약간은 복잡해 보일 수 있으나, 알고 나면 전혀 복잡한게 아니니 겁먹을 필요는 없습니다  일단 코드부터 살펴 보겠습니다

마우스 제한 임시 풀기

아래 코드 설명에 치환자가 사라지고 안 보이네요  첨부파일을 받아서 사용하세요

invalid-file

      <!-- link -->
       <div class="link">
         <h3>Links</h3>
<br/>
        <div id="as_div" align="left" >       

<img src="http://fs.tistory.com/custom/blog/6/64622/skin/images/is_link_blog.gif" align="absmiddle">&nbsp;<select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#000;width:140px;">
                                   <option value="">--- Select - Blog ---</option>
                           <s_link_rep>
                                   <option value="(##_link_url_##)"> (##_link_site_##)</option>
                           </s_link_rep>
                            </select><br/>

 
덧, () 로 된 괄호는 실제 적용시에는 [] 로 바꾸어 주어야함  위 첨부파일엔 []로 적용된 코드가 들어 있음  첨부파일을 받아서 사용하세요

    <!-- meta site -->
       <img src="http://fs.tistory.com/custom/blog/6/64622/skin//images/is_link_meta.gif" align="absmiddle">&nbsp;<select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#000;width:140px;">
           <option value="">--- Select Meta Hub ---</option>
           <option value="http://www.newslog.com/w3web/news/"> Web2.0 NewsLog</option>
           <option value="http://www.blogkorea.org/"> Blog Korea</option>
           <option value="http://www.naaroo.com/"> Naaroo</option>
           <option value="http://blog.ebuzz.co.kr/main/blogranking.php"> BUZZ Blog Ranking</option>
           <option value="http://www.brainn.co.kr/"> BrainN</option>
           <option value="http://bloggernews.media.daum.net/"> Daum BloggerNews</option>
           <option value="http://careerblog.scout.co.kr/"> Careerblog</option>
           <option value="http://www.mediamob.co.kr/"> Mediamob</option>
           <option value="http://openblog.mediamob.co.kr/"> Openblog</option>
           <option value="http://allblog.net"> Allblog</option>
           <option value="http://www.eolin.com/"> Eolin</option>
           <option value="http://blogplus.net/"> Blogplus</option>
           <option value="http://www.spotplex.com/"> Spotplex</option>
           <option value="http://www.technorati.com/"> Technorati</option>

       </select><br/>

       </div>
               </div>

이게 전체 코드 입니다 

• 분홍색 박스 부분이 티스토리 관리자에서 링크 추가하면 나타나는 부분입니다  꼭 있어야 하는 부분입니다
  

• 그 아래 하늘색 박스 부분은 메타 블로그 내용들 입니다  이 부분에 링크를 추가하려면 사용자가 직접 입력을 해야 합니다  이 부분이 필요가 없다면 삭제해도 상관은 없습니다  
  

• 저같은 경우 링크 목록이 하나더 있습니다  하나 더 만들분은 하늘색 박스 부분을 참고해서 만들면 됩니다 
  

• 파랑색 글씨는 링크 목록 박스 앞에 나오는 사각 아이콘 이미지 입니다  그냥 사용을 해도 되고, 삭제를 하면 아이콘이 안 나옵니다 
  

• 빨강색 글씨는 링크의 폭입니다  자신의 사이드바 크기에 맞추어 조절을 하면 됩니다 
  

• 초록색 글씨는 링크 박스안에 나타나는 문구 입니다  원하는 문구로 바꾸면 됩니다

자신의 블로그의 스킨 수정으로 들어가면, 위 이미지처럼 링크 부분이 있습니다  저 부분을 지우고, 위 코들 복사하면 됩니다

덧, 링크 앞 아이콘 이미지는 마루님이 만든 링블로그의 아이콘을 활용하였음
덧2, 초기 작성 2008년 1월 6일, 1차 오류수정 1월 22일