티스토리 블로그 HTML 코드 삽입하는 3가지 방법 – 북클럽 스킨 기준

티스토리 블로그 HTML 코드 삽입하는 3가지 방법

티스토리 블로그를 운영하면서 디자인을 바꾸거나 기능을 추가하고 싶다면 HTML 코드를 검색하게 됩니다.
특히, 북클럽 스킨을 사용하고 있다면 좀 더 쉽게 접근하게 되며 기본적인 HTML 편집으로도 블로그를 훨씬 더 세련되게 만들 수 있을 것으로 보입니다.

이번 글에서는 북클럽 스킨을 기준으로 HTML 코드를 삽입하는 3가지 방법을 정리해 보았습니다.!
✅ 본문 내 HTML 코드 삽입
✅ 스킨 HTML 편집을 통한 수정
✅ HTML 위젯을 활용한 추가 기능 적용

이제 블로그 디자인과 기능을 자유롭게 커스터마이징 해볼까요? 

1️⃣ 본문 내 HTML 코드 삽입 (글 작성 시 활용)

가장 간단한 방법은 게시글 작성 시 HTML을 직접 삽입하는 것입니다.
이 방법을 사용하면 글의 디자인을 커스터마이징 하거나, 특정 기능을 추가할 수 있어요.

🔹 HTML 편집 모드 사용 방법

1. 글쓰기 화면에서 "HTML 편집" 버튼을 클릭합니다.
2. 원하는 HTML 코드를 입력합니다.
3. 다시 **"일반 모드"**로 돌아가서 확인합니다.

✅ 실전 예제: 본문 내 버튼 추가하기

블로그 글에서 CTA(Call-To-Action) 버튼을 추가하고 싶다면, HTML을 활용할 수 있어요.

<a href="https://yourlink.com" style="display:block; padding:10px; background:#007bff; color:#fff; text-align:center; text-decoration:none; border-radius:5px;">
👉 더 알아보기
</a>

💡 활용 팁:

• 이 버튼을 사용하면 이벤트 페이지, 유튜브, SNS 링크로 유도할 수 있어요.
• 색상과 스타일을 조정하면 더욱 개성 있는 디자인이 가능!

✅ 실전 예제: 유튜브 영상 삽입

<iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>

💡 활용 팁:

• 북클럽 스킨에서는 본문 영역이 넓어 동영상 삽입이 효과적이에요!
• 영상과 함께 설명을 덧붙이면 가독성이 좋은 콘텐츠 제작 가능

2️⃣ 스킨 HTML 편집을 통한 수정 (디자인 & 기능 변경)

북클럽 스킨의 기본 레이아웃을 변경하고 싶다면, 스킨 HTML 편집 기능을 활용해야 합니다.
이 방법을 사용하면 블로그의 기본 구조와 디자인을 수정할 수 있어요.

🔹 HTML 편집 모드 접속 방법

1. 티스토리 관리자 페이지로 이동
2. [스킨 편집] > [HTML 편집] 클릭
3. HTML/CSS 코드 수정 후 저장

✅ 실전 예제: 블로그 헤더에 커스텀 메뉴 추가

북클럽 스킨에는 기본적인 내비게이션 메뉴가 있지만, 추가 메뉴를 넣고 싶다면 HTML 편집이 필요합니다.

• 홈
• 📚 책 리뷰
• 🖋️ 칼럼
• 🎥 유튜브

<nav class="custom-menu">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/category/책리뷰">📚 책 리뷰</a></li>
    <li><a href="/category/칼럼">🖋️ 칼럼</a></li>
    <li><a href="https://youtube.com">🎥 유튜브</a></li>
  </ul>
</nav>

✅ CSS 스타일 추가 (스킨 편집 > CSS 수정)

.custom-menu ul {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 5px;
}
.custom-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.custom-menu a:hover {
  color: #007bff;
}

💡 활용 팁:

• 책 리뷰, 칼럼, 유튜브 등 원하는 메뉴를 자유롭게 추가할 수 있어요.
• 상단 내비게이션이 더 직관적으로 보이도록 디자인을 개선할 수 있습니다.

 

3️⃣ HTML 위젯을 활용한 추가 기능 적용

HTML 위젯을 활용하면, 블로그 특정 영역에 HTML 코드를 삽입할 수 있어요.
이 방법은 사이드바, 푸터, 포스트 하단 등에 추가 기능을 적용하는 데 유용합니다.

🔹 HTML 위젯 추가 방법

1. 티스토리 관리자 페이지에서 [꾸미기] > [사이드바] 이동
2. "HTML 배너출력" 위젯 추가
3. 원하는 HTML 코드 입력 후 저장

✅ 실전 예제: 블로그 구독 버튼 추가

📩 블로그 구독하기

 

<div style="text-align: center; margin-top: 20px;">
  <a href="https://yourblog.com/rss" style="background:#ffcc00; padding:10px 20px; color:#000; text-decoration:none; border-radius:5px; font-weight:bold;">
    📩 블로그 구독하기
  </a>
</div>

💡 활용 팁:

• 방문자가 쉽게 RSS 구독, 뉴스레터 신청을 할 수 있도록 유도 가능
• 사이드바, 푸터 등 자주 보이는 위치에 배치하면 효과적

---

마무리

오늘은 티스토리 북클럽 스킨에서 HTML 코드를 삽입하는 3가지 방법을 알아봤어요!

🔹 본문 내 HTML 코드 삽입: 버튼, 유튜브 영상 추가
🔹 스킨 HTML 편집: 내비게이션 메뉴, 디자인 변경
🔹 HTML 위젯 활용: 구독 버튼, 배너 삽입

HTML을 활용하면 진짜 북클럽 스킨도 더욱 개성 있는 블로그로 탈바꿈할 수 있을 것 같아요!
요즘 출장업무로 매일 공부하면서 정리하겠다는 다짐이 무너지고 있지만 조금의 시간이라도 나면 공부내용을 정리하도록 계속 노력해야겠습니다. 오늘도 모두 즐거운 하루 보내세요.

---

태그: 티스토리, 블로그 HTML, 북클럽 스킨, HTML 코드 삽입, 블로그 꾸미기, 웹디자인, CSS, 블로그 최적화, SEO, 티스토리 스킨 수정