🔗 티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기

티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기

티스토리 블로그 하단에 이전글·현재글·다음글 버튼 넣기 — 반응형으로 더 예쁘게 ✨

독자가 글을 다 읽은 뒤 어디로 이동해야 할지 분명하게 안내해 주는 것이 체류 시간과 회전율을 높이는 지름길입니다. 

여기서는 티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기를 주제로, 관리자 화면에서 바로 복붙할 수 있는 HTML·CSS 독립 코드 박스와 정확한 삽입 위치를 안내합니다. 📱💻

---

미리보기 👀

◯‹ 이전글: 제목이 길어도 자동 줄바꿈으로 자연스럽게 보입니다
📌 현재글: 티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기
다음글: 마우스 오버 시 버튼만 부드럽게 반응하고 밑줄은 생기지 않습니다 ◯›

---

설치 순서 🧭

① HTML 삽입 위치

관리자 홈 → 스킨 편집 → HTML 편집 → <s_permalink_article_rep> 내부에서
태그 블록(</s_tag_label>) 바로 아래 넣고,
관련글 블록(<s_article_related>) 바로 위에 배치하세요.
흐름: 본문 → 태그 → 네비게이션(여기 삽입) → 관련글 → 댓글

HTML — 복붙용

<!-- 📌 이전글 / 현재글 / 다음글 네비게이션 -->
<div class="post-nav-wrapper">
  <table class="post-nav">
    <tr>
      <td class="prev-post">
        <s_article_prev>
          <a href="[##_article_prev_link_##]">
            <strong class="label"> ← 이전글</strong>: <span class="title">[##_article_prev_title_##]</span>
          </a>
        </s_article_prev>
      </td>

      <td class="current-post">
        📌 <strong class="label">현재글</strong>: <span class="title">[##_article_rep_title_##]</span>
      </td>

      <td class="next-post">
        <s_article_next>
          <a href="[##_article_next_link_##]">
            <strong class="label">→ 다음글</strong>: <span class="title">[##_article_next_title_##]</span>
          </a>
        </s_article_next>
      </td>
    </tr>
  </table>
</div>

<!-- 📌 끝 -->

② CSS 삽입 위치

관리자 홈 → 스킨 편집 → CSS 편집 맨 아래에 붙여넣고 저장하세요.

CSS — 복붙용

/* 📌 이전글/현재글/다음글 섹션 */
.post-nav-wrapper{margin:40px 0;text-align:center}
.post-nav{width:100%;border-collapse:collapse;table-layout:fixed}
.post-nav td{padding:12px;font-size:15px;vertical-align:top}
.post-nav .prev-post{text-align:left}
.post-nav .current-post{text-align:center}
.post-nav .next-post{text-align:right}

.post-nav .label{font-weight:700}
.post-nav .current-post .title{color:#ff6600;font-weight:700}

.post-nav a{color:inherit;text-decoration:none}
.post-nav a:hover{text-decoration:none;background:transparent!important;box-shadow:none!important}


.post-nav a,.post-nav .title{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;line-height:1.45}


@media (max-width:767px){
  .post-nav-wrapper{display:block!important}
  .post-nav{display:table!important;table-layout:fixed!important;width:100%!important}
  .post-nav tr{display:table-row!important}
  .post-nav td{display:table-cell!important;width:33.33%!important;vertical-align:top!important;padding:6px 4px!important}
  .post-nav .prev-post{text-align:left}
  .post-nav .current-post{text-align:center}
  .post-nav .next-post{text-align:right}

 
  .post-nav a{display:inline-block;max-width:100%}
  .post-nav .title{
    display:block;max-width:100%;
    white-space:nowrap!important;          /* 데스크톱 규칙을 모바일에서 덮어씀 */
    overflow:hidden!important;text-overflow:ellipsis;
    word-break:normal!important;overflow-wrap:normal!important;
    line-height:1.45;
  }
}

---

체크리스트 ✅

• <s_permalink_article_rep> 내부에 넣었는지 확인
• HTML은 태그 아래·관련글 위 순서에 배치했는지 확인
• CSS는 맨 아래에 추가
• 모바일에서 이전글, 현재글, 다음글이 3등분 폭으로 가로 길이가 고정되고 제목이 긴 경우 자동으로 줄 바꿈이 되는지 확인

---

결과 — 코드 적용 후 모습 📌

이전글, 현재글, 다음글 적용 예시

참고사항

1. 이전글, 다음글은 같은 카테고리 내에서만 이동합니다.
2. 티스토리 스킨에 따라 불안정한 경우도 있습니다.
3. html 코드나 css 코드는 최대한 단순한 것이 안정적입니다. 

---

마무리 🎉

이렇게 하면 티스토리 블로그 하단에 이전글 현재글 다음글 버튼 넣기를 손쉽게 구현할 수 있습니다. 즐거운 티스토리 블로그 커스터마이징 되세요! ✍️

Previous

Next