티스토리 사이드바 링크를 깔끔하게..

 

블로그에 대한 글을 몇개 작성하지 않았는데 방문하시는 분들이 많이 계시네요.
방문하시는 분들중 이미 전문가가 되신분들도 계시지만 이제 막 티스토리를 시작하는 분들도 많이 계시는 것 같습니다.

제 블로그를 자주 찾으시는 행우니님께서 제 블로그의 사이드바에 있는 링크를 보고 그 방법에 대해서 궁금하셔서 이렇게 포스팅을 합니다.

 

 

태그를 이용한 링크의 정리

블로그의 운영경륜이 쌓이면서 같이 늘어나는것이 즐겨찾는 블로그의 링크가 아닌가 합니다. 네이버의 이웃블로거에 해당되는 것이 티스토리의 링크입니다. 네이버는 네이버 블로그만 이웃블로거로 등록할 수 있으나 티스토리는 티스토리 뿐만 아니라 다른 모든 블로그를 링크로 추가할 수가 있습니다. 하지만 링크가 많아지게 되면 사이드바에 세로로 쭉 늘어져서 디자인적으로 보기가 좋지 않습니다. 그래서 RSS 리더기로 옮기고 링크를 정리하는 사람도 많이 있습니다. 하지만 아직까지 rss리더는 글을 읽기 위한 것이고 링크는 친근한 또는 관심있는 블로그에 쉽고 빠르게 방문하는데 좋습니다. 또한 블로깅을 하는 사람이라면 본인의 블로그에 접속해 있는 시간이 많으므로 언제든지 자주 찾는 블로그에 방문하는데는 링크가 매우 편리합니다.

 

쭉 늘어진 링크를 정리해보자

링크가 너무 길어지게 되면 세로로 쭉늘어져 보기에도 좋지 않지만 원하는 블로그를 찾는데 시간이 걸리게 됩니다. 그래서 링크수가 많아지게 되면 관련있는 분야로 분류하여 정리를 해두는 것이 좋습니다. 이미 유명 블로거분들은 분류를 해놓아 디자인적으로도 보기 좋고 실제 이용하는데도 편리하답니다.

이를테면 자주찾는 블로그, 자주가는 사이트, 운영중인 블로그   이런식으로 분류를 하는 것이지요. 분류를 한다음 select box를 이용하여 간단하게 마무리를 하면 됩니다. 조금 복잡할지 모르겠지만 깔끔하게 정리를 위해서는 감수를 해야 합니다.

1. 링크모듈 제거

관리페이지의 "스킨-사이드링크"에서 링크모듈을 제거합니다.

티스토리 사이드바 링크 정리

2. 추가된 링크 인쇄.

<select> 태그를 이용하여 링크를 정리합니다. 이 작업은 하나 하나 모두 수작업으로 이루어집니다. 먼저 관리페이지의 "링크-링크관리"에서 추가해놓은 블로그 주소를 인쇄 또는 메모를 해둡니다.

티스토리 사이드바 링크 정리

3. 태그작성

이제 html 태그를 작성합니다. 여기서필요한 태그는 select 태그입니다. 위에서 인쇄해놓은 블로그주소를 아래와 같이 작성을 합니다. 작성은 메모장이나 에디터를 이용하여 작성하면 됩니다.

<select를 이용한 링크편집>

<h3>자주가는 곳</h3>
 <select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#666;width:200px;line-height:130%">
 <option value="" select>--- 블로그 선택 ---</option>
 <option value="http://ccoma.tistory.com">-블로그로 돈벌기팁 - 비앤아이</option>
 <option value="http://ianstory.tistory.com">-아주쉬운 과학이야기</option>
 <option value="http://misamo.tistory.com">-윈도우바탕화면,아이콘 모음</option>
 <option value="http://bloggertip.com">-블로거팁 닷컴</option>
 <option value="http://mepay.tistory.com">-Kay~의 사진창고</option>
  </select>

위의 소스대로 추가하려는 블로그 주소를 모두 추가합니다. 위에서 다른 부분은 모두 똑 같이 하고 분홍색 부분에 자신이 추가하려는 블로그 주소나 사이트 주소를 같은 형식으로 작성을 합니다. 작성이 완료되면 나중에 사용할 수있도록 저장을 해둡니다.

※ 간단한 소스설명

<select></select>: select 사이의 option에 적어준 내용을 리스트형태로 보여주는 태그
onchange : list에서 선택한값이 바뀌면 발생하는 이벤트헨들러로 여기서는 리스트를 선택하면
                   자바스크립트 "window.open(this.value)"가 실행되도록 했음.
window.open(url) : 지정한 url을 팝업창으로 오픈함.
this.value : 리스트에서 선택한 값.
style : 리스트박스의 글이나 문단의 서식을 지정. 글꼴이나 글자색, 줄간격을 지정한것으로 생략하거나 각각의 블로그에 맞춰 수정할 수 있음.
  * width:200px은 사이드바 넓이이므로 본인 블로그 사이드바의 폭에 맞추세요!

 

4. 사이트에 html 태그 삽입

티스토리 사이드바 링크 정리

"스킨-사이드바 설정"을 선택하여 사이드바 설정페이지로 이동합니다. 그런다음 아래에서 "HTML 배너출력"을 적당한 위치에 삽입을 합니다. 그런다음 추가한 html 배너출력의 "편집"을 누릅니다.
그런다음 미리 작성해놓은 태그를 복사하여 붙여넣기를 한다음 확인을 누릅니다.

5. 마지막으로 저장을 하면 끝이 납니다.

티스토리 사이드바 링크 정리 완성

완성된 모습

이런방식으로 필요한 만큼 분류하여 배치를 시킬 수가 있습니다. 사이드바의 링크가 너무 많아 보기좋지 않은분은 이번기회에 깔끔하게 정리해보시는 것은 어떨까요?
복사방지가 되어 있어 소스 부분 첨부하므로 다운로드하여 사용하세요.

소스 다운로드 

신고

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon sssagagi 2009.05.28 06:19 신고  댓글주소  수정/삭제  댓글쓰기

    감사해요 덕분에 사이드바 깨끗해졌어요
    좋은정보 많네요
    좋은글 자주 부탁드립니다

  3. BlogIcon 소월ⓥ 2009.06.14 21:54 신고  댓글주소  수정/삭제  댓글쓰기

    오 이거 너무 감사합니다 ㅋㅋ
    몇일전부터 이거 하자하자 했는데 너무 복잡해 보여서 안하고 미루고미루고있엇는데
    이거 보니 별것 아니군요 ! ㅋㅋㅋ
    뭐 .. 케이님께서 소스 올려 주는거 쓰니 아무것도 아니지만 .. ㅋㅋ
    감사합니다 잘쓸게여 ㅎ.ㅎ

  4. BlogIcon 에멜린 2009.06.15 17:00 신고  댓글주소  수정/삭제  댓글쓰기

    와우_드디어 하나 해결했어요 ^-^ 감사합니다.ㅋㅋ

  5. BlogIcon 으아~ 2009.07.18 16:22 신고  댓글주소  수정/삭제  댓글쓰기

    글 잘 읽었습니다.. 설명데로 해서 되긴 하는데..
    오른쪽에 나타나는 프로필 부터 해서 관리자,최근댓글,최근글,카테고리등등의
    메뉴들이 밑으로 쭉 밀려서 나와요..뭐가 잘못된거죠? ㅠㅠ
    다른 님들은 잘 되는것 같은데...ㅠㅠ
    화면 캡쳐했으니까 보시고 해결방법좀 부탁드려요...감사합니다.

    http://sholahmah.tistory.com/entry/20506
    이 주소로 가셔서 함 봐주세요

  6. BlogIcon 으아~ 2009.07.18 17:26 신고  댓글주소  수정/삭제  댓글쓰기

    오른쪽 화면 밀렸다고 질문 드린 사람인데...ㅋㅋㅋㅋ
    고마워요~^^ 즐겨찾기 해놓고 자주 놀러올게요
    좋은정보 감사합니다 ^^

  7. BlogIcon 바람처럼~ 2009.08.03 03:39 신고  댓글주소  수정/삭제  댓글쓰기

    와~ 저도 조만간 해봐야겠어요 ^^
    항상 궁금해하던건데....

  8. BlogIcon 트레이너"강" 2009.08.03 23:14 신고  댓글주소  수정/삭제  댓글쓰기

    제가 찾던 포스트입니다.^^ 열심히 따라해봐야겠습니다. 근데 생각보다 쉽지않을듯 ㅜㅜ 감사합니다.^^

    • BlogIcon Kay~ 2009.08.30 16:33 신고  댓글주소  수정/삭제

      아하 그러시군요!
      이 내용은 그냥 소스 다운로드 받아서 수정만 하면 되므로 특별히 어려운 부분은 없는것 같아요! ^^

  9. BlogIcon 꿈꾸는 푸 2009.10.11 16:07 신고  댓글주소  수정/삭제  댓글쓰기

    오늘 좋은 글 보며 링트 정리 깔끔하게 마무리했네요

    감사합니다

  10. BlogIcon 마음의 꿀단지 2010.02.09 14:04 신고  댓글주소  수정/삭제  댓글쓰기

    블로그 링크를 깔끔하게 꾸며 보려고 찾았었는데요..^^ 정보 감사합니다 ~

  11. 소풍 2010.02.18 12:02 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 넘 좋아요 .꾸벅

  12. BlogIcon njhlove 2010.03.04 22:06 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.. 그런데 한가지 궁금한 점이 있습니다..
    html 배너 출력의 방식 말고 기존의 링크 이미지 아래에 select 태그를 입히는 방법은 없을까요..??
    그럼 좋은 하루 되세요 ~ ^ㅡ^a

    • BlogIcon Kay~ 2010.03.08 14:29 신고  댓글주소  수정/삭제

      방식은 크게 다를바 없습니다.
      링크이미지를 skin.html 에서 찾은다음에
      그 이미지 아래에 select box를 삽입하면 됩니다.
      하지만 수정을 자주 해야 한다면 html 배너출력 플러그 인이 더 편할것입니다. ^^

  13. BlogIcon 점프아이 윤재맘 2010.03.09 19:11 신고  댓글주소  수정/삭제  댓글쓰기

    항상 감사합니다~~ 공부 제대로 잘하고 있어요 ^^

  14. BlogIcon 다프넬 2010.04.01 15:15 신고  댓글주소  수정/삭제  댓글쓰기

    태그입력기 써서 성공했어요!! 좋은 정보 정말 감사합니다! ㅎㅎ
    블로깅하는데 아무래도 서툰 점이 많아서 허둥대고 있었는데 앞으로 자주 들릴 것 같아요. ㅎ 많이 배워가겠습니다 :)

  15. blue7 2010.05.04 23:19 신고  댓글주소  수정/삭제  댓글쓰기

    도움이 되는 좋은 포스팅 잘 보고 있습니다.
    작성하신 포스트와 관계는 적지만 질문하나 하겠습니다.
    사이드바 전체를 우측 끝으로 전체 이동시키는 방법은 있는지 궁금합니다.
    어느 블로그에 갔었는데 사이드바 모두가 우측 끝으로 붙어 있는걸 봤습니다.
    지금 사용하시는 사이드바는 우측끝에 육안으로 측정하기에 약 2.5cm 정도
    빈 여백이 있는데요.
    이 여백을 없애고 사이드바를 모두 우측 끝으로 밀착시키는 방법은 있는지 궁금합니다.

  16. BlogIcon 피아노블로그 2010.08.20 17:06 신고  댓글주소  수정/삭제  댓글쓰기

    유용한 정보네요! 나중에 링크가 더 많아지게 되면 꼭 사용해봐야겠어요.

  17. BlogIcon BumPD 2010.09.27 14:54 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 소스네요.. 제 블로그에도 바로 적용시켜 봤습니다.
    너무 감사드립니다. 비앤아이 블로그 자주 방문하는데,
    좋은 정보 얻어 가네요.

  18. BlogIcon 대출컨설턴트 2010.10.18 17:42 신고  댓글주소  수정/삭제  댓글쓰기

    아고.. 링크하나 시키는것도 한 30분은 소요된듯..ㅠㅠ
    어찌됐던 처음으로 링크추가 시켰습니다. ^^
    많이 배워야 겠습니다.. 잘 부탁드리겠습니다~~ (__)

  19. BlogIcon for you ~! 2011.06.12 06:11 신고  댓글주소  수정/삭제  댓글쓰기

    에효~~^^!!~~
    도대체 모가 몬지,,,
    수십을 읽어봐도 이해가 안가요,,ㅜㅜ
    처음 시작을 해서 용어도 생소하고,,,,^^
    어떻게 해야하는지 가르처 주셔요,,,^~^*
    좋은 하루 되시구여,,,ㅎㅎ

    • BlogIcon Kay~ 2011.06.12 23:30 신고  댓글주소  수정/삭제

      음.. 태그를 모르는 상태라면 정말 생소한데다..
      이해를 못하니 어려움이 있을것입니다.
      먼저 사이드바와 관련 된부분과 태그를 삽입하는 방법을 이해한다음에
      적용하면 편할듯 합니다.

  20. BlogIcon 머니뷰 2012.06.10 10:44 신고  댓글주소  수정/삭제  댓글쓰기

    링크가 깔끔합니다.
    장착해야 겠어요..~~~감사합니다.
    꾸벅~~

  21. BlogIcon Alice'sStory 2013.06.25 21:18 신고  댓글주소  수정/삭제  댓글쓰기

    우와 감사합니다!! 좋은정보 어어가요^^