길어진 사이드바 블로그링크, 접었다 펼치기 방법으로 간단하게 하기

길어진 사이드바 블로그링크, 접었다 펼치기 방법으로 간단하게 하기

네이버에 이웃블로그 추가하듯이 티스토리에는 블로그링크 추가 기능이 있습니다.
티스토리의 블로그링크 추가 기능은 이웃블로그의 링크를 내 블로그의 사이드바에 쉽게 추가하고 쉽게 찾아갈 수 있도록 한 기능입니다.

내 블로그 이웃? ^^

 

하지만 추가한 링크가 많아지게 되면 사이바가 한없이 길어지는 단점이 있습니다.
디자인상으로 매우 보기 안 좋지싶습니다.

이러한 점을 보완하기 위한 기능으로 예전에 티스토리 사이드바 링크를 깔끔하게..라는 제목으로 포스팅을 했는데 이 방법은 사이드바가 깔끔하긴 하지만 이웃블로그의 링크추가하는 방법이 좀 불편하다는 단점이 있습니다.

그래서 이 2가지 방법의 장점만을 취한 방법은 없을까 하고 고민하다고 해결방법을 찾았습니다. ^^
이와 관련한 내용은 지나번에 포스팅한 "블로그 꾸준히 하려면 이웃관리는 필수, 케이도 이웃관리 들어갑니다."에서도 언급을 했던 내용입니다.

 

사이드바 링크 디자인을 망가뜨리지 않고 쉽게 추가하기

오늘은 티스토리에서 제공되는 링크모듈 플러그인을 이용하되,
링크가 길어져도 보기 싫지 않도록 접었다 폈다하는 방법에 대해서 포스팅해보도록 하겠습니다.

이 방법을 이용하면 블로그 링크도 쉽게 추가하고 사이드바도 깔끔하게 할 수가 있습니다.

작업 절차

1. 자바스크립트 소스를 준비한다.
2. style.css에 스타일 추가한다.
3. skin.html 을 수정한다.
4. 사이드바의 링크모듈이 없으면 링크모듈을 추가한다.

작업절차를 나열해놔서 그렇지 그다지 복잡한 과정은 아닙니다. ^^
다만 이 작업을 하기 전에 혹시나 모를 사고에 대비하여 미리 스킨저장을 해두는 것이 좋습니다.

 

1. 자바스크립트 소스를 준비한다.

지금 하려고 하는 작업은 자바스크립트와 style sheet를 이용한 방법입니다.
자바스크립트 소스는 아래 소스만 있으면 됩니다.

<script language="JavaScript">
 function showMenu(currMenu)
 {
     thisMenu =document.getElementById(currMenu).style;
     if (thisMenu.display == "inline")
     {
        thisMenu.display = "none";
     }
     else
     {
        thisMenu.display = "inline";
     }
 }
</script> 

위 자바스크립트 소스 복사가 안되는 분들은 첨부파일을 다운로드 하세요!

sidebar_펼침메뉴_소스.txt

 

2. style.css에 스타일을 추가한다.

티스토리 관리페이지의 "스킨>HTML/CSS편집" 메뉴를 선택 후
style.css 의 제일 하단에 아래의 스타일을 추가합니다.

 #bloglink { display:none; }

 

3. skin.html을 수정한다.

1) skin.html에 항목 1 에서 준비한 자바스크립트 소스를 추가한다. 
   방법은 skin.html 의 상단쪽에 있는 </head> 위쪽에 소스를 삽입하면 됩니다.

위쪽으로 삽입해주세요!'>

 2) 스타일 적용

  찾기를 이용하여 "link_url"을 검색합니다.
 <div id="link"> 라고 표시된 부분이 사이드바에 링크를 표시해주는 부분입니다.
 스킨에 따라서 이 이름이 다를 수도 있지만 "link_url"은 똑 같을것이므로
 ## _link_urkl_ ##을 찾아서 작업하면 됩니다.

<s_sidebar_element>
   <!-- 링크 모듈 -->
   <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>
</s_sidebar_element>

 

위에서 빨간색으로 표시한 부분을 수정할것입니다.
아래 처럼 수정을 합니다. (빨간색 글자로 표시된 부분)

<s_sidebar_element>
    <!-- 링크 모듈 -->
    <div id="link">
      <h3><a href="#blink" onclick="showMenu('bloglink')"><font color=#0E86D6>+ 블로그링크</font></a></h3>
     <div id="bloglink">
      <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>
    </s_sidebar_element>

 

4. 사이드바의 링크모듈이 없다면 링크모듈 추가

마지막 작업으로 사이드바에 링크모듈이 없다면 관리단에서 "스킨>사이드바" 를 선택한 후
기본모듈에서 "링크모듈"을 추가해 주면 됩니다.

작업이 끝났습니다.

이제 사이드바를 보면 아래 왼쪽 그림처럼 "+ 블로그 링크"로 표시가 되는데 ..
이 "+ 블로그 링크"를 클릭하면 아래 오른쪽 그림처럼 펼쳐지면서 링크가 보이게 됩니다.

티스토리의 경우

이웃블로그의 우측상단에 보면 아래 그림처럼 "이 블로그를" 클릭하여 "내 링크에 추가"를 누르면 됩니다.

다음, 네이버 블로그 및 기타 사이트 추가

티스토리 관리페이지 > 링크> 링크관를 클릭하여 "링크추가"를 누른다음 등록하면 됩니다.

[관련글]

[CSS] 티스토리스킨-댓글 스타일시트 이해하기
[CSS] 티스토리 스킨 댓글, 트랙백 스타일 이해하기
[CSS] 티스토리 포스트 제목 스타일(style)
style.css 완전정복 3 <블로그 본문 영역 css>
[css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리
티스토리 블로그꾸미기 - 메뉴,사이드바,애드센스등