블로그들을 보면 사이드바 메뉴에 링크 항목이 있습니다 처음엔 링크 목록이 몇개 안 되기 때문에 그리 부담이 되지는 않지만, 링크수가 하나 둘씩 늘어 갈수록 점점 공간도 많이 차지하게 되고, 지저분하게 됩니다
제 블로그를 보면 이런 링크를 적은 공간에서 효율적으로 관리하기 위해 접었다 펼 수 있게 설치를 해 놓았습니다 이번 포스트는 이 방법에 관해 포스팅을 할까 합니다
제 블로그의 링크 목록입니다 3가지로 나누어서 분류를 해 놓았습니다 이 방법은 코드를 직접 수정을 해야 함으로 약간은 복잡해 보일 수 있으나, 알고 나면 전혀 복잡한게 아니니 겁먹을 필요는 없습니다 일단 코드부터 살펴 보겠습니다
아래 코드 설명에 치환자가 사라지고 안 보이네요 첨부파일을 받아서 사용하세요
링크정리코드.txt <!-- 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"> <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/>
<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"> <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/>
<img src="http://fs.tistory.com/custom/blog/6/64622/skin//images/is_link_meta.gif" align="absmiddle"> <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일
RSS 구독
Email 구독|
|
