티스토리 블로그 링크 이웃 목록, 콤보 박스 드롭 다운 형식 구현

티스토리 블로그 포스팅을 하면서 저는 몇몇 블로그 이웃님들과 즐겁게 소통을 하면서 계속 링크를 계속 추가하였습니다. 물론 너무 많아서 언젠간 정리도 좀 해야 할 수 있겠지만 지금은 정리하는 것보다 콤보 박스 드롭 다운 형식으로 구현하기로 하였습니다.

스킨마다 다를 수 있지만 혹은 저와 같이 등록된 링크 수가 많지 않다면 상관이 없지만 콤보 박스로 구현을 하면은 한화면에 표시되는 링크 목록이 아닌 편하게 한 곳으로 한꺼번에 모아서 편리하게 이웃 블로그를 방문하고 관리할 수 있다는 장점이 있습니다.

링크 이웃 목록, 콤보 박스 구현

저의 블로그의 사이드 바를 보시면 아시겠지만 수십 개의 Links 이웃 블로그 님들이 등록된 것을 볼 수 있습니다.

요즘 사정상 일이 생겨 모두 방문을 못하지만 스크롤 양도 쓸데없이 많아져 이를 콤보 박스 하나로 묶어보겠습니다.

1) 티스토리에 로그인한 후 'HTML/CSS 편집' 메뉴로 가서 jquery 소스가 없으시다면 아래와 같이 head 태그 안에 적용합니다.

2) 사이드바 쪽에 ul 과 li 태그를 모두 select 와 option 태그로 모두 바꿔줍니다. 잘 모르시겠으면 다음 단계를 참조합니다. (스킨마다 소스가 조금 다를 수 있습니다.)

3) 아래와 같이 태그를 수정하였으면 저장합니다.

4) 아래와 같이 깔끔하게 콤보 박스로 구현이 완료되었으나 '이웃 블로그를 방문'하고 콤보 박스 제목인 '이웃 목록'을 선택하면 저의 블로그로 다시 이동되는 문제를 발견하였습니다. 문제를 파악하고 소스를 다시 새로 추가해야겠습니다.

5) 추가한 link 콤보 박스를 제어하기 위해 id를 link_url로 지정하였습니다.

6) body 태그 맨 끝에 windows load 소스를 추가해 그 안에 해당 id 의 link_url로 지정한 콤보 박스 change 제어 소스를 입력 후 저장합니다.

7) 그럼 다시 확인해보면 이웃 블로그 방문 시 첫 번째 옵션은 무조건 비활성화된 것을 볼 수 있습니다.

저는 편하게 이웃과 소통하려고 콤보 박스 형식으로 드롭 다운으로 만들었습니다. 물론 이것도 원 스킨 제작자마다 저처럼 더 편하게 만들었을 수 있겠지만 만약에 저와 같이 링크가 너무 많고 관리가 안 된다면 한번 적용해보시기 바랍니다.