사이드바 모듈 추가하기

가이드/tokii at whale·2017.07.19 19:14

사이드바에 새로운 모듈을 추가하여 여러 기능을 추가하거나 링크를 추가 할 수 있습니다.

모듈 추가하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. HTML 탭에서 <!-- secondary -->를 검색한 뒤 맨 아래에 다음 코드를 추가합니다.
    <!-- secondary -->
    <div class="secondary">
    <s_sidebar>
    ...
    <s_sidebar_element>
    <!-- #모듈제목 -->
    <section class="module">
      <h2 class="screen_out">제목</h2>
      <div class="module-content">내용</div>
    </section>
    </s_sidebar_element>
    </s_sidebar>
    <!-- //secondary -->
    
  3. 상단 여백과 구분선을 없애려면 box 클래스를 추가해주세요.

    <!-- 모듈 제목 -->
    <section class="module box">
      <h2 class="screen_out">제목</h2>
      <div class="module-content">내용</div>
    </section>
    </s_sidebar_element>
    

제목없는 링크 모듈 추가하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. HTML 탭에서 <!-- secondary -->를 검색한 뒤 맨 아래에 다음 코드를 추가합니다.
    <!-- secondary -->
    <div class="secondary">
    <s_sidebar>
    ...
    <s_sidebar_element>
    <!-- #모듈제목 -->
    <section class="module">
      <h2 class="screen_out">제목</h2>
      <nav>
        <ul>
          <li><a href="주소" target="_blank">링크제목</a></li>
          <li><a href="주소" target="_blank">링크제목</a></li>
          <li><a href="주소">링크제목</a></li>
        </ul>
      </nav>
    </section>
    </s_sidebar_element>
    </s_sidebar>
    </div>

제목있는 링크 모듈 추가하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. HTML 탭에서 <!-- secondary -->를 검색한 뒤 맨 아래에 다음 코드를 추가합니다.
    <!-- secondary -->
    <div class="secondary">
    <s_sidebar>
    ...
    <s_sidebar_element>
    <!-- #모듈제목 -->
    <section class="module listbox">
      <h2>제목</h2>
      <nav>
        <ul>
          <li><a href="주소" target="_blank">링크제목</a></li>
          <li><a href="주소" target="_blank">링크제목</a></li>
          <li><a href="주소">링크제목</a></li>
        </ul>
      </nav>
    </section>
    </s_sidebar_element>
    </s_sidebar>
    </div>

참고사항

  1. 모듈 추가는 반드시 맨 아래에 해주세요. 중간 혹은 위에 추가할 경우 일부 모듈이 순서 변경 또는 누락 될 수 있습니다.
  2. 링크를 새 창으로 띄우지 않으려면 링크의 target 속성을 지워주세요.
    <li><a href="주소" target="_blank">링크제목</a></li>
신고
Posted by 9월 'ㅅ')/

태그

관련 글

네이버톡톡

네이버 톡톡
댓글 0

티스토리 툴바