본문 바로가기
블로그 스팟 (Blogeer)

블로그스팟 템플릿 변경과 커스텀 방법

by moneystock22 2025. 4. 8.

블로그스팟(Blogger)은 기본 제공되는 템플릿으로도 충분히 블로그를 운영할 수 있지만, 내 스타일에 맞게 디자인을 바꾸고 싶은 분들이 많습니다. 템플릿 변경과 커스터마이징은 블로그의 분위기와 사용자 경험에 큰 영향을 주기 때문에 매우 중요한 과정입니다.

이번 가이드에서는 블로그스팟에서 제공하는 기본 템플릿 변경 방법부터 HTML, CSS를 활용한 세부 커스터마이징 방법까지 초보자도 쉽게 따라 할 수 있도록 단계별로 정리했습니다.

 

1. 기본 템플릿 변경하기

블로그 대시보드에 접속한 후, 왼쪽 메뉴에서 ‘테마’를 클릭합니다. 이곳에서는 블로그스팟에서 제공하는 다양한 무료 템플릿을 미리 보고 적용할 수 있습니다.

원하는 템플릿의 ‘적용’ 버튼을 클릭하면 즉시 블로그에 반영됩니다. 마음에 들지 않으면 언제든지 다른 템플릿으로 바꿀 수 있으며, 기존 게시물은 그대로 유지됩니다.

2. 테마 사용자 설정

‘사용자 설정’ 옵션을 클릭하면 색상, 글꼴, 배경 이미지 등 일부 디자인 요소를 직접 수정할 수 있습니다. 예를 들어 블로그 제목 글꼴을 바꾸거나 배경 색을 밝게 설정하는 등 간단한 스타일 변경이 가능합니다.

모바일 뷰에서 어떻게 보일지도 실시간 미리보기를 통해 확인할 수 있어 편리합니다.

 

3. 외부 템플릿 업로드

더 고급스럽고 개성 있는 디자인을 원한다면 외부에서 템플릿 파일(XML 형식)을 다운로드해 업로드할 수 있습니다. 템플릿은 Gooyaabi Templates 같은 사이트에서 무료 혹은 유료로 구할 수 있습니다.

다운로드한 템플릿은 ‘테마’ 메뉴에서 오른쪽 상단 점 세 개 메뉴 → ‘복원’ 클릭 후 파일을 업로드하면 적용됩니다.

4. HTML 직접 편집

디자인을 더욱 세밀하게 조절하고 싶다면 HTML 편집 기능을 활용할 수 있습니다. ‘테마’ 메뉴에서 ‘HTML 편집’을 클릭하면 블로그 전체 구조를 구성하는 코드가 열립니다.

헤더, 본문, 사이드바, 푸터 등 각 영역을 수정하거나 원하는 위젯을 추가할 수도 있습니다. 단, 코드 수정 전에는 항상 백업을 해두는 것이 안전합니다.

 

5. CSS 커스터마이징

HTML 코드 내에서 <style> 태그를 활용해 CSS를 삽입하거나, Blogger의 '고급' 스타일 편집기를 통해 직접 입력할 수 있습니다. 예를 들어 글자 크기, 색상, 여백 등을 세부적으로 조정할 수 있습니다.


/* 본문 글자 크기 조절 */
.post-body {
  font-size: 17px;
  line-height: 1.8;
}

6. 위젯 추가 및 배치 조정

‘레이아웃’ 메뉴에서는 블로그 각 요소의 배치를 손쉽게 조절할 수 있습니다. 위젯 추가 버튼을 클릭하면 프로필, 인기 글, HTML/JavaScript 위젯 등 다양한 기능을 추가할 수 있습니다.

이 기능을 활용해 방문자 카운터, 광고 코드, SNS 링크 등을 삽입할 수 있습니다.

블로그 디자인은 단순한 꾸미기를 넘어서 방문자의 체류 시간과 블로그 이미지에 직접적인 영향을 줍니다. 나만의 감성을 담아 템플릿을 구성해 보세요. 약간의 시간과 노력을 투자하면 훨씬 더 매력적인 블로그로 거듭날 수 있습니다.