티스토리 이웃 링크 깔끔하게 정리하기

2013. 8. 4. 09:57IT/Tistory Tips

티스토리 블로그에 이웃 링크를 삽입하면 아래로 길게 나열된다. 평소엔 괜찮지만, 이웃이 많아지면 본문보다 사이드바가 길어져서 보기가 좋지 않을 수 있다. 그럴 땐 스킨을 조금만 수정하면 링크를 깔끔하게 정리할 수 있다.

1. 링크 영역에 스크롤 바 추가하기

첫 번째 방법은 간단한 CSS 수정으로 이웃 링크 부분에 스크롤 바를 추가하는 것이다. 이 방법의 장점은 CSS만 수정하면 바로 적용할 수 있다는 점.

일단 [티스토리 관리] - [꾸미기] - [HTML/CSS 편집]으로 이동한 다음 skin.html에서 <s_link_rep>를 찾는다.

<s_sidebar_element>
<!-- 링크 --> 
  <div class="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>

대략 위와 같은 형태로 구성되어 있을 텐데 [##_link_site_##] 부분을 찾는다. 그리고 그 부분을 포함한 상위 태그에서 class 또는 id라느 부분을 찾는다. 위의 예에선 class="link" 부분이다. 이 class나 id를 이용해서 스타일을 지정하면 끝이다.

이제 스타일을 지정해보자. [티스토리 관리] - [꾸미기] - [HTML/CSS 편집] - style.css에 아래의 내용을 추가한다.

.link ul{
        height: 80px;
        overflow-y: auto
        }

.link는 위에서 확인한 class="link"를 의미하는 선택자이고 overflow-y: auto는 내용이 정해진 높이 이상 될 때 자동으로 스크롤 바를 추가하라는 의미다. 높이는 height 속성으로 조정할 수 있다. 선택자에 대한 상세한 내용은 CSS 선택자(Selector)와 우선순위를 참고한다.


2. 링크 영역을 드롭다운 목록으로 나타내기

두 번째 방법은 HTML을 수정해서 링크 영역 자체를 드롭다운 목록으로 바꾸는 방법이다. 링크를 깔끔하게 정리할 수 있을 뿐 아니라, 사용자가 원하는 방법으로 그룹화할 수도 있다.

역시 첫 번째 방법과 같이 [티스토리 관리] - [꾸미기] - [HTML/CSS 편집]으로 이동한 다음 skin.html에서 <s_link_rep>를 찾는다.

<s_sidebar_element>
<!-- 링크 --> 
  <div class="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 class="link"> 
    <h3>링크</h3> 
    <select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center"> 
      <option value="">---- 이웃 목록 ----</option> 
        <s_link_rep>
          <option value="[##_link_url_##]">[##_link_site_##]</option>
        </s_link_rep>
    </select>
  </div> 
</s_sidebar_element>

'---- 이웃 목록 ----' 부분은 드롭다운 목록의 제목 부분이다. 원하는 제목으로 바꾼다. <s_link_rep>는 그 사이에 있는 부분을 전체 이웃 목록으로 반복해서 표현하는 부분이다. 즉, 이웃 수만큼 option 태그가 생긴다.

<select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center">
 <option value="/#">---- 티스토리 이웃 ----</option>
 <option value="http://이웃1.tistory.com/">너는 내 이웃 1</option>
 <option value="http://이웃2.tistory.com/">너는 내 이웃 2</option>
 <option value="http://이웃5.tistory.com/">너는 내 이웃 5</option>
 <option value="http://이웃6.tistory.com/">너는 내 이웃 6</option>
</select>
<select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center">  <option value="/#">---- 네이버 이웃 ----</option>  <option value="http://blog.naver.com/이웃3">너는 내이버 이웃 3</option>  <option value="http://이웃4.blog.me/">너는 내이버 이웃 4</option> </select>

이웃을 그룹화하고 싶다면 select 태그를 여러 개 사용하면 된다. 단, 이럴 땐 각 select 태그에 표시할 하위 option 태그를 사용자가 직접 입력해야 한다. 이웃이 많다면 작성하는 데 시간이 오래 걸려 불편하지만, 대신 블로그 이웃 외에도 즐겨가는 사이트 등의 링크를 추가할 수 있다는 장점도 있다.

예제에서 드롭다운 목록의 너비와 스타일을 인라인으로 지정했는데, 너비를 지정하는 width 속성은 해당 링크가 위치할 사이드바의 전체 너비보다 작게 설정한다. 또 style.css에 따로 select 태그에 대한 스타일을 정의해도 상관없다.

<예제>