구글 블로그 템플릿 기능 활용법 - HTML 양식 자동 삽입하기

6월 19, 2025

코드 붙여넣기의 번거로움 해소

제가 전에 포스팅 했던 글에서

구글 블로그스팟에서 활용할 수 있는 펼쳐보기/접기 박스 의 HTML코드와

카드뉴스 형식으로 포스팅 하기 HTML 코드를 공유 드렸었습니다.

그런데 실제로 활용하다보면,
그때그때 코드를 불러와서 필요한 부분에 삽입해 넣기가 생각보다 번거롭습니다.

차라리 새 글 작성 버튼을 누르면, 내가 사전에 등록한 필요한 템플릿들이 알아서 떠있고,
그 중에 필요한 것만 사용하면 편리하겠습니다. 라는 욕구가 생깁니다.

이럴 때는 글 템플릿 기능을 활용하여 해결할 수 있습니다.

구글 블로그 템플릿 설정으로 HTML 양식 자동 삽입하는 방법

구글 블로거(Blogspot)에서는 템플릿 기능을 활용해 자주 사용하는 HTML 양식을 미리 저장해 둘 수 있습니다.

특히 펼쳐보기/접기 박스, 특수 정렬 구조, 문단 강조 박스처럼 반복적으로 사용되는 요소들은 매번 코드를 복사하거나 직접 작성하는 번거로움을 줄이기 위해 템플릿으로 등록해 두는 것이 효율적입니다.

이 글에서는 템플릿 설정 방법부터 HTML 양식 예시까지, 구글 블로거에서 실전 활용할 수 있는 HTML 템플릿 운영 방법을 정리합니다.

템플릿 기능 활용하기

템플릿 기능이란 무엇인가

구글 블로거 글쓰기 화면 상단의 도구 중 하나로, 자주 쓰는 콘텐츠 조각(HTML 포함)을 저장해두고 새 글 작성 시 불러올 수 있는 기능입니다.

해당 기능은 정식 명칭은 ‘템플릿(Templates)’이며, 글쓰기 도구 상단 우측의 톱니바퀴 메뉴 > 템플릿 관리를 통해 접근할 수 있습니다.

구글 블로그 관리화면 → 설정 → 글 템플릿에 있습니다.

구글 블로그 설정의 '글 템플릿 '

대표적인 활용 예: 펼쳐보기/접기 박스

예를 들어 다음과 같은 접이식 박스는 블로거에서 많이 활용되는 양식 중 하나입니다.

접이식 박스 (펼쳐보기/ 접기)

구글 블로그의 HTML 보기 기능을 사용하면 더 자유롭게 스타일을 적용할 수 있습니다.

HTML 코드 보기

<div style="display: flex; justify-content: center; margin-top: 20px;">

  <!-- 가운데 정렬된 카드 -->
  <div style="background-color: white; border-radius: 8px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; max-width: 600px;">
    <div style="padding: 16px;">
      <h3 style="margin-top: 0px;">HTML 코드 삽입 팁</h3>
      <p>구글 블로그의 HTML 보기 기능을 사용하면 더 자유롭게 스타일을 적용할 수 있습니다.</p>

      <details style="border-top: 1px solid rgb(221, 221, 221); margin-top: 12px; padding-top: 12px;">
        <summary style="cursor: pointer; font-weight: bold;">HTML 코드 보기</summary>
        <pre style="background-color: #f9f9f9; border-radius: 4px; font-size: 14px; margin-top: 10px; overflow-x: auto; padding: 10px;">&lt;div style="font-weight:bold;"&gt;강조 텍스트입니다&lt;/div&gt;
        </pre>
      </details>
    </div>
  </div>

</div>

이 코드를 템플릿에 저장해두면 매번 새 글마다 직접 코딩하지 않고도 자동으로 불러와 내용만 바꿔 넣을 수 있습니다.

저는 아래 내용들을 템플릿에 등록해서 사용하고 있습니다.

새글 작성을 누르면 화면에 아래 내용들이 미리 등록되고 디스플레이 됩니다.

필요한 것만 추려서 편집할 수 있습니다.

매번 코드를 찾아서 붙여넣는 것보다는 실용적입니다.

템플릿 사례

템플릿 등록 방법

1. 구글 블로그 글쓰기 화면으로 이동합니다.

2. 우측 상단의 톱니바퀴 아이콘(설정) > 템플릿 메뉴를 클릭합니다.

3. ‘새 템플릿 추가’ 버튼을 눌러, 등록할 HTML 코드를 붙여넣기 합니다.

템플릿 등록 화면

4. 저장을 하셨다면, 새글 쓰기 버튼을 누르면 위에서 등록한 템플릿들이 미리 등록되어 나오는 것을 알수 있습니다.

등록된 템플릿은 필요 시 언제든 편집하거나 삭제할 수 있으며, HTML뿐 아니라 텍스트, 이모지, 정렬 코드, 나만의 캐치프레이즈 등도 함께 저장할 수 있습니다.

템플릿 활용 시 주의할 점

템플릿 기능은 복잡한 자바스크립트 동작에는 제한이 있으며, CSS나 HTML도 브라우저 호환성을 고려해 작성해야 합니다. 특히 모바일 환경에서 펼쳐보기 박스나 탭 구조를 사용할 경우 반응형 동작 여부를 미리 확인하는 것이 중요합니다.

결론

구글 블로거의 템플릿 기능은 반복적인 HTML 코드를 효율적으로 관리할 수 있는 유용한 도구입니다. 펼쳐보기/접기, 컬럼 배치, 콘텐츠 강조 박스, 광고 삽입 영역 등 구조가 일정한 콘텐츠를 자주 다루는 사용자에게 특히 유용합니다.

앞으로 블로거를 운영하며 콘텐츠 일관성을 유지하고 작업 시간을 절약하고자 한다면, 자신만의 템플릿 라이브러리를 구축해두는 것이 효과적입니다.

락이와 함께한 생활 이야기