HTML 코드로 티스토리 커스텀 사이드바 추가 & 메뉴 수정하기 – 북클럽 스킨 기준

티스토리 클럽 스킨은 기본적으로 깔끔한 디자인을 제공하지만, 사이드바와 메뉴를 원하는 대로 수정하려면 HTML 편집을 할 수밖에 없죠. 커스텀 사이드바를 추가하여 카테고리 목록, 인기 글, 구독 버튼을 추가하거나, 메뉴를 고정형 네비게이션 바로 변경하면 더 편리한 블로그 환경을 만들 수 있습니다. 물론 블로그에 콘셉트에 맞추어 추가여부를 판단해야겠죠? 이번 글에서는 HTML과 CSS를 활용해 클럽 스킨에서 커스텀 사이드바를 추가하는 방법과 메뉴를 수정하는 방법을 공유해볼까 합니다.

1️⃣ 북클럽 스킨의 기본 사이드바 & 메뉴 구조

🔹 사이드바

북클럽 스킨은 기본적으로 사이드바를 제공하지만, 디자인이 단순하고 추가 기능이 제한적입니다.
HTML을 수정하면 더 다양한 요소(인기 글, SNS 버튼, 구독 폼 등)를 추가할 수 있어요!

📌 기본 사이드바 구성 요소:

• 프로필 박스
• 카테고리 목록
• 태그 클라우드
• 최근 글 목록

💡 추가할 기능:

• 인기 글 리스트
• SNS 팔로우 버튼
• 구독 폼 (이메일 뉴스레터)

🔹 메뉴(네비게이션 바)

북클럽 스킨의 기본 메뉴는 상단에 위치하며, 스크롤 시 사라지는 방식입니다.
HTML과 CSS를 수정하면 고정형 네비게이션 바로 만들거나, 카테고리 추가도 가능합니다!

2️⃣ HTML 코드로 사이드바 커스터마이징 (인기 글, 구독 버튼 추가)

기본 사이드바 외에도 인기 글, SNS 버튼, 구독 폼을 추가해 더 유용한 사이드바를 만들 수 있어요.

✅ HTML 코드: 사이드바에 인기 글 & 구독 폼 추가하기

인기 글

• [리뷰] 2024년 추천 도서 TOP 10
• [칼럼] 성공하는 블로거의 습관
• [가이드] HTML & CSS로 블로그 꾸미기

뉴스레터 구독

SNS 팔로우

📷 인스타그램 🎥 유튜브

<aside class="custom-sidebar">
  <h3>🔥 인기 글</h3>
  <ul>
    <li><a href="#">[리뷰] 2024년 추천 도서 TOP 10</a></li>
    <li><a href="#">[칼럼] 성공하는 블로거의 습관</a></li>
    <li><a href="#">[가이드] HTML & CSS로 블로그 꾸미기</a></li>
  </ul>

  <h3>📩 뉴스레터 구독</h3>
  <form action="#">
    <input type="email" placeholder="이메일을 입력하세요" required>
    <button type="submit">구독하기</button>
  </form>

  <h3>🔗 SNS 팔로우</h3>
  <div class="sns-buttons">
    <a href="https://instagram.com" class="sns-btn instagram">📷 인스타그램</a>
    <a href="https://youtube.com" class="sns-btn youtube">🎥 유튜브</a>
  </div>
</aside>

✅ CSS 코드: 사이드바 스타일 변경

.custom-sidebar {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
}
.custom-sidebar h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.custom-sidebar ul {
  list-style: none;
  padding: 0;
}
.custom-sidebar ul li {
  margin-bottom: 5px;
}
.sns-buttons a {
  display: block;
  padding: 10px;
  margin: 5px 0;
  text-align: center;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}
.instagram {
  background: #e1306c;
}
.youtube {
  background: #ff0000;
}

💡 활용 팁:

• 인기 글, 구독 폼, SNS 버튼을 추가해 방문자의 체류 시간을 늘릴 수 있음
• 배경색, 버튼 스타일을 변경하여 블로그 디자인에 맞춤 적용 가능

3️⃣ 메뉴바(네비게이션 바) 스타일 변경 & 상단 고정

내비게이션 바를 상단 고정하면 사용자가 스크롤을 내려도 메뉴를 계속 볼 수 있어 더 편리한 블로그 환경이 됩니다.

✅ CSS 코드: 내비게이션 바 상단 고정 & 디자인 변경

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

✅ HTML 코드: 네비게이션 바 메뉴 추가

• 🏠 홈
• 📚 리뷰
• 📝 가이드
• 🎥 유튜브

<nav class="custom-menu">
  <ul>
    <li><a href="/">🏠 홈</a></li>
    <li><a href="/category/review">📚 리뷰</a></li>
    <li><a href="/category/guide">📝 가이드</a></li>
    <li><a href="https://youtube.com">🎥 유튜브</a></li>
  </ul>
</nav>

💡 효과:

• 스크롤을 내려도 메뉴가 유지되어 사용자 경험(UX) 개선
• 메뉴 항목을 자유롭게 추가해 더 직관적인 블로그 탐색 가능

4️⃣ 반응형 네비게이션 메뉴 적용 (모바일 최적화)

✅ CSS 코드: 모바일에서 메뉴 버튼 표시하기

@media screen and (max-width: 768px) {
  .custom-menu {
    display: none;
  }
  .mobile-menu-button {
    display: block;
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
  }
}

✅ HTML 코드: 모바일 메뉴 버튼 추가

<button class="mobile-menu-button">☰ 메뉴</button>

💡 활용 팁:

• 모바일에서는 메뉴를 숨기고 버튼을 클릭하면 펼쳐지도록 설정 가능
• 사용자가 더 깔끔하게 블로그를 탐색할 수 있도록 최적화 가능

마무리

오늘은 북클럽 스킨을 기반으로 HTML 코드로 사이드바 & 메뉴를 수정하는 방법을 공유해보았습니다. 전 사이드바 커스터마이징 기능을 어떻게 더 활용하면 좋을지 보고 있는데 아직 제대로 써먹질 못하고 있네요. 이 기능은 사진이나 이미지를 추가해서 배너처럼 사용해도 좋을 거 같더라고요.  아직 많이 응용이 부족한 부분이 많은데 더 열심히 공부해 보아야겠습니다. 그럼 오늘도 좋은 하루 보내세요.

✅ 사이드바 커스터마이징: 인기 글, SNS 버튼, 구독 폼 추가
✅ 내비게이션 바 고정: 스크롤 시 메뉴 유지
✅ 반응형 메뉴: 모바일 환경 최적화
✅ SEO 최적화: 검색 노출 개선