H : T : M : G : A : W

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

Posted at 2013. 2. 17. 07:16 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


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




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


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



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개의 카테고리로 분류된 드롭박스 링크가 생성되었습니다. 이쁜 블로그 꾸미시기 바랍니다^^



    Comments

티스토리 댓글


  1. 신기한 기능이네요! 나중에 시간나면 꼭 시도해 봐야겠내요 ㅎㅎ
    좋은 정보가 많은거 같아 블로그 링크추가 하고갈게요~

    이제막 티스토리를 시작한 새내기 블로거인데 시간되시면 놀러오셔서 블로그 링크 추가 부탁드릴게요! 혼자하려니 너무 외롭네요 ㅠ

    P.S. 링크추가 버튼은 좌측하단 사이드바로 설정해 두었으니 오셔서 꼭 링크 부탁드릴게요~
  2. 궁금한거요

    길이 조정은 알겠는데

    혹시 폭 조정은 안되나요?

    저한테 적용 시켰을때

    글씨체가 너무 작고 안보여서

    높이를 바꾸고 싶은데요
  3. 링크 반영 잘되었습니다. 덕분에 고민 한가지 더 해결했네요 ^^ 감사합니다 ^^

Name __

Password __

Link (Your Website)

Comment

SECRET