사이드바에 모듈 추가하기

가이드/tokii in folio2017.08.25 17:57

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


사용자 정의 모듈 추가하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. HTML 탭에서 <!-- sidebar -->를 검색한 뒤 </s_sidebar> 바로 위에 하이라이팅 된 부분(<s_sidebar_element>로 시작하여 </s_sidebar_element>로 끝나는)의 코드를 복사하여 붙여넣습니다.
    <!-- sidebar -->
    <aside class="sidebar">
      <!-- site-toolbar -->
      <div class="site-toolbar">...</div>
      <!-- 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 -->
    </aside>
    <!-- //sidebar -->
    
    • #모듈 이름: 현재 모듈의 이름
    • 내용: 추가하고자 하는 HTML 코드

링크 모듈 추가하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. HTML 탭에서 <!-- sidebar -->를 검색한 뒤 </s_sidebar> 바로 위에 하이라이팅 된 부분(<s_sidebar_element>로 시작하여 </s_sidebar_element>로 끝나는)의 코드를 복사하여 붙여넣습니다.
    <!-- sidebar -->
    <aside class="sidebar">
      <!-- site-toolbar -->
      <div class="site-toolbar">...</div>
      <!-- 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="주소" target="_blank">링크 제목</a></li>
          </ul>
        </nav>
      </section>
      </s_sidebar_element>
      </s_sidebar>
      <!-- //secondary -->
    </aside>
    <!-- //sidebar -->
    
    • #모듈 이름: 현재 모듈의 이름
    • 주소: 추가하고자 하는 링크의 주소
    • 링크 제목: 링크 제목

참고사항

  1. 모듈 추가는 반드시 맨 아래에 해주세요. 중간 혹은 위에 추가할 경우 일부 모듈이 순서 변경 또는 누락 될 수 있습니다.
  2. 상단 여백과 구분선을 없애려면 box 클래스를 추가해주세요.
    <!-- #모듈 이름 -->
    <section class="module box">
      ...
    </section>
    </s_sidebar_element>
    
  3. 모듈 제목을 감추려면 <h2>screen_out 클래스를 추가합니다.
    <h2 class="screen_out">#모듈 이름</h2>
    
  4. 링크를 새 창으로 띄우지 않으려면 링크의 target 속성을 지워주세요.
    <li><a href="주소" target="_blank">링크제목</a></li>
신고

작성자

Posted by 9월 'ㅅ')/

태그

관련 글

네이버톡톡

네이버 톡톡

댓글 영역

티스토리 툴바