블로그 팁

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

haveone 2010. 5. 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="" onclick="window.open(this.href); return false"> .</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="https://t1.daumcdn.net/cfile/tistory/204B5F0D4BFBE64801"></a><DIV style='display:none'>
                        <ul>
                            <s_link_rep>
                                <li>
                                    <a href="" onclick="window.open(this.href); return false"> .</a>
                                </li>
                            </s_link_rep>
                        </ul></div></div>
                    </div>

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

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

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

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

참조한 곳 - 티비님 블로그 http://nextgoal.tistory.com/433
반응형