사이드바에 사용자 위젯 추가하기

탕비수다 스킨을 한 페이지 모드가 아닌 사이드바 모드로 사용할 경우 사이드바에 사용자가 원하는 위젯을 추가할 수 있습니다. 본 문서는 사이드바에 사용자 위젯을 추가할 때 참고할 수 있도록 세 가지 형식의 위젯을 제시합니다.

HTML을 잘 아는 경우 직접 “관리센터 > 꾸미기 > HTML/CSS 편집 > HTML”에서 s_sidebar_element 태그를 추가할 수 있겠지만 해당 문서는 그렇지 못한 사용자를 대상으로 작성했습니다.

물론, 탕비수다 블로그에 사용한 이미지들과 글은 서로 어울리지 않습니다. 게다가 글 내용과 자막이 달라 혼란합니다.

사이드바 위젯은 일반 위젯과 리스트 위젯 그리고 박스 위젯으로 구분됩니다. 일반 위젯은 블로그 정보와 같이 사진과 글이 같이 쓰일 때 유용합니다. 리스트 위젯은 최근 글이나 링크와 같이 순서대로 나열할 때 사용하면 좋습니다. 마지막으로 박스 위젯은 태그와 같이 정렬과 관계 없는 항목을 나열할 때 사용합니다.

배너출력 사용하기

“관리센터 > 꾸미기 > 사이드바”에서 원하는 내용을 입력해 위젯을 추가하기 위해서는 배너출력 플러그인을 활성화해야합니다. 티스토리의 배너출력 사용안내에 따르면 “배너출력 플러그인은 이미지 경로를 입력하거나 직접 HTML을 편집하여 사이드바에 원하는 배너를 삽입할 수 있게 도와주는 플러그인”입니다.

“관리센터 > 플러그인 > 플러그인 설정 > 관리 및 통계”에서 사용하도록 설정할 수 있습니다. 대부분 ‘HTML 배너출력’을 사용하며 관련 사용안내는 “[사용법] 배너 출력 / 빈 줄 넣기 / 태그 입력기 플러그인”을 살펴보세요.

기본 위젯: 기본 HTML

HTML 배너출력을 사이드바 1에 추가 후 편집을 통해 원하는 내용을 입력하세요.

<!-- 기본 위젯 -->
<div class="widget">
  <h3 class="header"><span>제목</span></h3>
  <!-- 원하는 내용을 입력하세요. -->
</div>

기본 위젯: 예제

이미지나 특정 내용을 입력하고 싶은 경우 아래와 같이 입력하세요.

<!-- 기본 위젯 -->
<div class="widget">
  <h3 class="header"><span>배너</span></h3>
    <!-- 원하는 내용을 입력하세요. -->	
    <p>
      <img src="이미지 URL">
        내용
    </p>
</div>

리스트 위젯: 기본 HTML

HTML 배너출력을 사이드바 1에 추가 후 편집을 통해 각각의 li 태그 안에 원하는 내용을 입력하세요.

<!-- 리스트 위젯 -->
<div class="widget list">
  <h3 class="header"><span>제목</span></h3>
    <!-- 각각의 li 태그 안에 원하는 내용을 입력하세요. -->
    <ul>
      <li></li>
    </ul>
</div>

리스트 위젯: 예제

특정 글을 나열하고 싶을 경우 아래와 같이 입력하세요.

<!-- 리스트 위젯 -->
<div class="widget list">
  <h3 class="header"><span>인기 글</span></h3>
    <!-- 각각의 li 태그 안에 원하는 내용을 입력하세요. -->
    <ul>
      <li><a href="/1">글1</a></li>
      <li><a href="/2">글2</a></li>
      <li><a href="/3">글3</a></li>
    </ul>
</div>

박스 위젯: 기본 HTML

HTML 배너출력을 사이드바 1에 추가 후 편집을 통해 각각의 li 태그 안에 원하는 내용을 입력하세요.

<!-- 박스 위젯 -->
<div class="widget box">
  <h3 class="header"><span>제목</span></h3>
    <!-- 각각의 li 태그 안에 원하는 내용을 입력하세요. -->
    <ul>
      <li></li>
    </ul>
</div>

박스 위젯: 예제

무작위로 나열되는 태그가 아닌 사용자가 원하는 태그를 사이드바에 추가할 경우 아래와 같이 입력하세요.

<!-- 박스 위젯 -->
<div class="widget box">
  <h3 class="header"><span>태그 메뉴</span></h3>
    <!-- 각각의 li 태그 안에 원하는 내용을 입력하세요. -->
    <ul>
      <li><a href="/tag/태그1">태그1</a></li>
      <li><a href="/tag/태그2">태그2</a></li>
      <li><a href="/tag/태그3">태그3</a></li>
    </ul>
</div>

위젯 간격

위에서 제공한 세 가지 위젯을 사용하면 제목에 설정된 간격으로 위젯의 간격이 조정됩니다. 다만, 제목을 사용하지 않을 경우 따로 간격이 형성되지 않습니다. 따라서 임의로 간격을 조정하기 위해서는 티스토리에서 제공하는 '빈 줄 표시' 플러그인을 통해 간격을 조정할 수 있습니다.

빈 줄 표시 플러그인은 “관리센터 > 플러그인 > 플러그인 설정 > 관리 및 통계”에서 사용하도록 설정할 수 있습니다. 빈 줄 간격은 40입니다.

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    문서 다른 글

    댓글 4

    *

    *

    이전 글

    다음 글