구글 블로그스팟 테마 변경 방법 (ft. SPEEDY BLOGGER 추천)

본 포스팅은 구글 블로그스팟 테마 변경하는 방법에 대해서 소개하고 있습니다. 특히, 오늘 변경할 테마인 SPEEDY BLOGGER 테마의 경우, 라벨을 이용한 카테고리 및 상단 메뉴 기능을 제공하고 있기에, 기본 제공되는 테마에 비해 상당히 준수한 테마라고 할 수 있습니다. 개인적으로 구글 블로그 테마 추천하라고 하면, 해당 테마를 추천할 듯 하네요.

특히, 구글 블로그스팟에서 제공되는 기본 테마의 경우, 포스팅의 제목이 H3 태그로 되어 있는 등 SEO적으로 문제가 있는 것에 반해, 해당 테마는 구글 SEO 친화적으로 구성되어 있기에, 노출 또한 도움이 될 듯 합니다.

SPEEDY BLOGGER 블로그스팟 테마

블로그스팟 테마 변경에 앞서, 우선 구글 블로그 테마를 다운로드 해야합니다. 해당 SPEEDY BLOGGER 테마는 다양한 사이트에서 무료로 다운로드 받을 수 있습니다. 저는 아래의 사이트를 이용해서 다운로드 받았습니다.

• Pikitemplates.com – Speedy Blogger Template 바로가기

해당 SPEEDY BLOGGER 테마의 경우, 아래의 장점을 갖고 있습니다.

• 빠른 로딩 속도
• 본문 내 광고, 상하단 광고 세팅 용이
• 구글 SEO 친화적
• 상단 메뉴 지원
• 카테고리 지원 (라벨 기능)

구글 블로거에서 기본 제공되는 테마를 이용하고 있던 저에게 해당 테마는 상당히 매력적으로 다가옵니다. 일단 기본적으로 H태그와 관련한 문제 또한 없으며, 상당히 심플해서 속도나 디자인적인 면에서 매우 편리함을 느꼈습니다.

또한, 추가적인 HTML 수정 없이도 간단히 레이아웃에서 몇 가지 설정만 세팅하면, 바로 적용할 수 있다는 점이 상당히 매력적이라고 생각되네요.

• 개인적인 의견이지만, 심플하면서 로딩 속도가 좋아 선호하는 워드프레스의 제네레이트프레스와 유사하여 상당히 만족하고 있습니다.

그럼 본격적으로 해당 구글 블로그스팟 테마 변경하는 방법에 대해서 설명하겠습니다.

구글 블로스스팟 테마 변경

구글 블로그 테마 변경하는 방법은 아래와 같은 절차로 진행됩니다.

• 테마 XML 업로드
• 레이아웃 설정
• CSS 추가
• 폰트 관련 HTML 수정
• 링크 텍스트 색상 변경

테마 XML 업로드

앞서 다운로드 받았던, SPEEDY BLOGGER 테마를 테마 메뉴의 복원 기능을 이용해서 업로드 합니다.

• 테마 다운로드 후 압축 해제를 하면 확장자가 XML로 끝나는 파일만 이용합니다.
• 혹여나 기존 테마는 백업을 실시하여 보관합니다.
• 테마 변경 시 기존 테마에 등록된 검색엔진 등록 정보 및 애드센스 소스가 삭제되기에 미리 메모장에 복사한 후 붙여 넣기를 실시합니다.

레이아웃 설정

해당 SPEEDY BLOGGER 테마 설치 후 레이아웃 메뉴로 이동하여 광고, 카테고리, 사이드바 노출과 관련한 설정을 마무리 합니다.

• ‘블로그 게시물’ 에서 메인 페이지에서 노출할 포스팅 수를 선정합니다.
• 본문 상단 광고는 좌측의 ‘inside post ads’에 애드센스 소스를 입력합니다.
• 본문 하단 광고는 우측의 ‘inside post ads’에 애드센스 소스를 입력합니다.
• 사이드바에서는 검색, 카테고리, 사이드바 광고를 넣을 수 있습니다.
• 카테고리 기능이 필요하다면, 각 포스팅이 라벨이 입력되어 있어야 합니다.

CSS 추가 (이미지 크기, 그림자)

해당 SPEEDT BLOGGER 테마의 경우, 이미지 폭 사이즈가 100%로 설정되지만 높이가 조정되지 않아 이미지가 일그러집니다. 별도의 CSS 추가 또는 HTML 편집으로 수정하여 줍니다. (해당 글에서는 HTML 편집이 아닌 간편한 CSS 입력으로 알려드립니다.)

아래의 메뉴에 해당 CSS를 추가하는 것으로 이미지 풀사이즈, 그림자 생성이 완료됩니다.

• 테마-맞춤설정-고급-CSS 추가

.post-body img {
width:100%;
height:100%;
display: block;
box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}

폰트 관련 HTML 수정

기본으로 설정된 본문 폰트 크기의 경우, 글씨가 매우 작고 행간이 좁은 관계로 시인성이 좋지 못합니다. HTML 편집을 통해서 본문 및 목록 폰트 크기를 수정하여 줍니다.

아래의 메뉴로 이동하여 HTML 편집을 실시합니다.

• 테마-맞춤설정 옆 화살표 클릭-HTML 편집

아래의 소스코드는 수정된 HTML 소스입니다. 찾기 기능( Ctrl+F )을 이용하여, ‘post-body’ 구문을 검색 후 유사한 소스 코드가 보이면, 아래와 같이 수정하여 줍니다.

.item-post .post-body{width:100%;font-family:var(--text-font);font-size:16px;line-height:1.6em;padding:0;margin:0}

.post-body ul{line-height:1.7em;font-weight:400;padding:0 0 0 15px;margin:10px 0}
.post-body li{margin:5px 0;padding:0;line-height:1.7em}

링크 텍스트 색상 변경

본인 블로그 내부 포스팅이나 외부 문서를 링크할 경우, 관련 텍스트 색상이 변경됩니다. 하지만, 해당 색상의 경우 뚜렷한 구별이 되지 않아, 링크 색상을 변경하는 것이 좋습니다. 테마 HTML 편집 창에서 해당 코드를 찾아 색상을 변경해주는 것이 좋습니다.

• 색상 변경 : #112b3e > #1E73Eb

<Variable name="body.link.color" description="Body Link Color" type="color" default="$(main.color)"  value="#1E73Eb"/>

링크 밑줄 표시

링크된 텍스트 아래에 밑줄을 표시하고 싶다면, 테마 HTML 편집 창에서 해당 코드를 찾아 아래와 같은 코드로 수정하여 줍니다.

.post-body a{transition:color .30s ease;text-decoration: underline}

이상 구글 블로그스팟 테마 변경하는 방법에 대해서 기술해봤습니다. 많은 글들에서 구글 블로그 테마 추천 시 기본 제공 테마를 권장하고 있습니다. 속도가 좋다는 것이 이유인데요. 이번에 설치한 SPEEDY BLOGGER 테마의 경우에도 속도 또한 기본 테마에 비해 떨어지지 않습니다.

또한 뭔가 부족한 기본 제공 테마에 비해, 디자인적으로나 기능적으로 매우 뛰어난 스킨임과 더불어 구글 SEO 측면에서도 매우 추천할 만한 테마입니다. 설치 작업 또한 간단하니, 지금 바로 테마 변경을 시도해 보세요.

✔ 블로그스팟 추천 쉽지 않은 이유 (ft. 검색 어려움)

✔ 구글 블로그 수익 쉽지 않네요! (ft. 글 219개)