블로그 팁2010.05.26 22:48

사이드바 링크 정리하기 - 감추기를 이용하여

저도 블로그 팁을 한 번 올려볼까 합니다.

많은 분들이 블로그를 하면서 점점 이웃이 늘고 이에따라 이웃블로그 링크가 점점 늘어납니다.
따로 관리하지 않으면 사이드바가 상당히 길어지죠.
깔끔함을 추구하시는 분들은  제 블로그에 적용된 것처럼 셀렉트 박스를 이용하여 정리하고 있죠.
이 방법이 보기에 상당히 깔끔합니다.
그런데 이웃 링크 목록을 추가할때마다 편집기나 사이드바설정에서 태그를 편집해 주어야 한다는 번거로움이 좀 있습니다.
사실 쉬운작업이긴한데 링크관리에서 쉽게 추가하는 것이 더 편하긴 하죠~

그래서 링크관리라는 티스토리의 본 기능을 사용하면서 정리하는 법은 없을까 염두해 두고 있던와중에
티비님 블로그에서 애드찜, 티스토리 사이드바에 깔끔하게 설치하기를 보고 아이디어가 떠올랐습니다.
바로 티스토리 본문글쓰기에서 더보기 기능처럼 처음에 숨겨놓았다가 클릭하면 내용이 나오는 방식을 이용하는 것이죠.

링크된 글에 있는 티비님글에 있는 태그를 링크모듈에 응용하면 사이드바를 깔끔하게 정리할 수 있습니다.

참고로 제 블로그는 링크란에 알라딘TTB를 넣어놔서 그런지 완벽히 적용되지 않아서 원상복귀시켜놓았습니다...
제 블로그처럼 카테고리가 박스형으로 이루어져 있다면, 참고만 하시길...; 실력이 딸려서 해결방안을 못찾았습니다.ㅜ

여튼 만들기만 해논 두번째 블로그-_-;를 이용해서 만들어 보았습니다.

1번은 정리하지 않은 기존의 상태입니다.
2번은 목록 버튼을 만들어 놓았고 이웃블로그 목록을 숨겼습니다.
3번은 이웃블로그 목록 버튼을 눌러서 펼친 모양입니다.

이런식의 방법으로 기존의 링크관리기능을 사용하면서 링크목록을 숨겨 사이드바를 정리할 수 있습니다.

사이드바 정리

티스토리 기본스킨에서 적용한 방법입니다. 스킨마다 차이가 있을 수 있습니다.
만약을 위해 편집하기전에 미리 백업해두세요!

1. 먼저, html/css 편집에 들어갑니다.

2. skin.html 에서 링크 모듈 이나 <div id="link">을 찾습니다.
                <!-- 링크 모듈 -->
                    <div id="link">
                        <h3>링크</h3>
                        <ul>
                            <s_link_rep>
                                <li>
                                    <a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
                                </li>
                            </s_link_rep>
                        </ul>
                    </div>

3. 밑의 회색박스에서 빨간색으로 된 부분을 아래와 같이 추가해 줍니다. (티비님 블로그 글에 있는 태그 사용)
                <!-- 링크 모듈 -->
                    <div id="link">
                        <h3>링크</h3>
<DIV><a href='javascript:void(0)'onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>
<img src="http://cfile26.uf.tistory.com/image/204B5F0D4BFBE64801DB0F"></a><DIV style='display:none'>
                        <ul>
                            <s_link_rep>
                                <li>
                                    <a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
                                </li>
                            </s_link_rep>
                        </ul></div></div>
                    </div>

위에서 밑줄 그어진 부분은
원하시는 글자나 이미지로 대체하실 수 있습니다.
저는 이부분에 포토샵으로 '이웃블로그 목록' 버튼을 만들어 넣었습니다.

4. 미리보기로 확인후에 스킨에 이상이 없으면 적용을 시킵니다.
그럼 끝~

마지막으로 정리하자면 이 방법의 장점은 기존 링크관리기능을 사용하면서 길어진 사이드바를 정리할 수 있다는 것.
단점은 목록을 펼쳤을 때 다시 길어진다는 점과 스킨마다 적용법이 다소 다르다는 것.

지금 이 블로그는 위의 소스와 구성이 좀 다릅니다. 그래도 저 소스와 비슷한 방식으로 완성해보긴 했는데, 다른 부분이 조금 이상해져서 이리저리 해보다가 그냥 원래대로 돌아왔습니다. 나중에 다시 한번 도전해봐야죠ㅎ

참조한 곳 - 티비님 블로그 http://nextgoal.tistory.com/433
저작자 표시 비영리 변경 금지
신고

Posted by haveone

댓글을 달아 주세요

  1. 헐~ 이런 팁을~ 저는 아직까지 이웃블로그 분들을 따로 링크시켜서 사이드바에서 이용하고 있지는 않거든요.
    네이버 위젯을 달아 놓아서 이웃블로거분들의 사진과 함께 볼수가 있기 때문이기도 한데, 지금 노트북의 상태가 워낙 안좋아서 30분정도만 사용하면 급격하게 느려져서 글을 쓰는 것 이외에 아무것도 할수가 없더라고요. 이웃블로거분들을 링크시지기 시작하면 꼭 참고 해야 겠네요~

    2010.05.26 23:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 폴라베어님 블로그에서 그거 보고 한번 해볼까했는데
      네이버 로그인창이 떠서 연동되는줄 알고 그냥 안했습니다ㅎ
      근데 이웃의 최근 글 순서대로 배열되는 것 같아 꽤나 괜찮아보입니다ㅎㅎ

      2010.05.27 11:14 신고 [ ADDR : EDIT/ DEL ]
  2. 흠흠, 애드찜 좀 수익좀 나오시는지요 ^_^;
    전 예전 달다가 그냥 내려버렸는데.
    대신 피자이벤트가 간간히 있었는데 지금은 어떻게 되는지 모르겠군요~

    2010.05.27 02:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 피자이벤트는 잘 모르겠습니다.
      애드찜 수익이라고 하면......ㅎ
      일주일해서 버스비정도 나올까싶습니다ㅜ
      딴 기대없이 블로그 악세사리 취급하며 그냥 달아놓습니다

      2010.05.27 11:16 신고 [ ADDR : EDIT/ DEL ]
  3. 사이드바에 이웃님들 줄줄이 늘어놓는건.. 전 좋던데요..ㅋㅋㅋ
    돈안들이고 훈장다는 느낌이랄까요.^^

    저야 워낙 사이드바에 별걸 안달아놔서 이러는 거지만..
    사이드바가 지저분하게 널려있으면 안좋으니.. 활용할만 할거 같습니다^^

    2010.05.27 09:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 오러님 블로그에 이웃들이 상당히 많죠ㅎ부럽긴 합니다~
      오히려 훈장처럼 보일수도 있겠군요. 저 같은 경우엔 본문에 비해 사이드바가 길어보이는게 좀 걸려서 좀 신경을 썼습니다ㅎ

      2010.05.27 11:18 신고 [ ADDR : EDIT/ DEL ]
  4. 비밀댓글입니다

    2010.05.27 11:56 [ ADDR : EDIT/ DEL : REPLY ]
    • 아 그렇군요~
      이것도 파폭이랑 익스랑 다르네요. 파폭은 새창으로 뜨는데...정보감사합니다^
      글구 이 블로그에 못달아서 버튼은 신경을 못썼네요ㅎ

      2010.05.27 21:31 신고 [ ADDR : EDIT/ DEL ]
  5. 오~ 헤븐님이 다른 스킨을 이용하셔서
    더 잘 응용해주셨네요~!!
    잘보고 갑니다. ^^

    2010.05.27 12:08 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 이거 굉장히 괜찮은데요? ㅎㅎ
    저같은 경우는 HTML 정리 상당히 번거롭더라구여 ㅠ

    2010.05.29 13:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 예 조금 번거롭긴 하죠~
      근데 지금 이걸 현 스킨에는 제대로 적용을 못하고 있어서ㅜ
      바티스타님 먼저 제 블로그 추가시켜놓으셨군요^
      앞으로 자주 찾아뵈죠.

      2010.05.29 20:36 신고 [ ADDR : EDIT/ DEL ]
  7. 저도 이웃추가 버튼을 달았는데.
    좀 고민이 있어서 찾다가 블로그에 오게 되었습니다.^^
    Haveone님 블로그를 보면, 버튼이 "이웃 커넥트" 버튼으로 보이고,
    클릭을 해야 접혔다 열렸다 하며 리스트와, 이웃 추가 버튼이 함께 보이는데,
    혹시 버튼 자체를 [이웃 커넥트]가 아닌 "이웃 추가 버튼"버튼만 설정하고,
    리스트는 아예 감추는 기능도 가능한가요?
    일부 블로거님들 보면, 이웃추가 버튼만 보이고,
    그외 리스트등은 모두 감추게 설정하신 분들이 있던데
    방법을 찾을 수 없어 살짝 조언을 구하고자 글 남깁니다.^^:

    2014.12.18 17:00 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바