티스토리 블로그 링크접기 설정방법

티스토리 블로그 링크접기 설정방법

오늘은 티스토리 블로그 링크 접기를 소개해드립니다. 티스토리 사이드바메뉴에서 "링크"노출이 제공되지만 아쉽게도 티스토리에 등록한 링크에 대한 기본관리만 제공되고 링크가 전부 열려있어서 링크가 많을때 관리하기가 힘들어지고 링크 이름도 수정할 수 없으며 카테고리도 나눌 수 없는 다양한 불편사항이 발생합니다. 

이제 내가 원하는 카테고리대로, 최소공간을 이용해서, 링크이름도 바꿀수 있는 깔끔한 드롭박스 메뉴의 링크를 생성해보도록 하겠습니다. 

1단계. 

먼저 사이드바 관리를 통해서 "링크"를 사이드바에 추가시키고 노출위치를 지정해줍니다.

2단계. 

티스토리 관리자 skin.html에서 "링크"모듈을 검색하신 후 <div id="link"> 와 </div> 사이에 기존에 있던 내용을 싹 지우고 아래 소스로 전부 덮어씌워줍니다. (기존 스킨꾸미기 및 티에디션 사용시 위치 및 내용들이 조금 다를 수 있으므로 Link 모듈위치만 잘 확인한 후 한꺼번에 없애고 작업하시는게 적용하기에 더욱 수월합니다.)

빨간음영은 카테고리에 노출될 펼치지기 전 목록 이름입니다. 링크의 성격이 다를경우 2개 또는 3개로 분리해서 관리하시면 편합니다. 저는 카테고리를 2개로 분류했기 때문에 초록색 음영처럼 셀렉트 박스가 2개로 구성되어 있습니다. 

아래는 링크접기 소스이니 복사해서 이름과 주소,박스크기만 지정해서 사용하시면 됩니다.

<select onchange= " ">는 링크 카테고리 박스를 몇개 추가할 것인지 나타내줍니다.

<option value=" "> </option>는 자유롭게 추가하면서 링크를 늘릴 수 있습니다.

<select ~>영역의 witdh 값은 박스의 좌우 길이이므로 원하는 사이즈로 조절이 가능합니다.

<!-- 링크 접기모듈 시작 ------------------>

  <div id="link"">

  <h3>Link</h3>

    <ul>

<select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#000;width:145px;">

<option value="">---- My Neighbors ----</option>

<OPTION value=http://reddreams.tistory.com>빨간꿈을꾸다</OPTION>

  </select>

<select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#000;width:145px;">

<option value="">-------- Favorites -------</option>

<OPTION value=http://reddreams.tistory.com>빨간꿈을꾸다</OPTION>

</select>

     </ul>

  </div>

</s_sidebar_element>

<!-- 링크 접기모듈 종료-------------------->

<!-- counter -->

저는 "태그 박스"와 "카운터" 사이에 링크박스를 위치시켰기 때문에 하단에 <!---counter---->가 보입니다만, 위에서 설명해드린대로 위치는 사이드바 관리 메뉴 및 소스이동을 통해서 자유롭게 변경하실 수 있습니다.

아래 그림처럼 깔끔하게 2개의 카테고리로 분류된 드롭박스 링크가 생성되었습니다. 이쁜 블로그 꾸미시기 바랍니다^^