이번 포스팅에서는 구글 블로그의 테마를 변경하는 방법을 알아보도록 하겠습니다.
구글 블로그 테마는 구글 블로그에서 기본적으로 제공하는 것도 있지만, 조금 더 검색에 최적화 되고 보기 좋은 테마를 찾아보기로 하였습니다.
구글 블로그의 장점은 HTML 수준의 최적화가 가능하므로 모든 변경에서 자유롭다는 것입니다.
구글 블로그 (blogspot) 테마 템플릿 선정
이번 글에서 변경할 테마 템플릿 선택 기준은 다음과 같습니다.
- 이미지를 포함 할 수 있어야 할 것
- 라벨을 사용하여 카테고리를 분류할 수 있어야 할 것
- 효과가 복잡하지 않고 속도가 빠를 것
검색을 통해 알아본 결과,
단순하지만 너무 글자만 나오지 않고 라벨을 사용하여 카테고리를 분류할 수 있는 템플릿을 찾았습니다.
해당 템플릿은 "Speedy Blogger Template"입니다. 이 템플릿을 적용해 보도록 하겠습니다.
해당 템플릿을 다운로드 받을 수 있는 곳은 여러 곳이 있지만, 그 중 아래 이미지 링크에서 다운로드 받으실 수 있습니다.
해당 사이트의 Speedy 템플릿에 대한 간략한 소개입니다.
Speedy 템플릿은 빠른 스피드를 위해 최소한의 가젯을 사용하였습니다.
Speedy 템플릿은 단순한 반응형 블로거 템플릿입니다.
구글 블로그의 기본 테마는 포스팅 글의 제목이 H3로 되어있어 검색엔진최적화(SEO)에 적합하지 않는 문제를 가지고 있습니다. 그러므로, 구글 블로그를 통해서 검색 유입을 고려하고 있는 분들이라면 기본 테마 이외의 다른 테마 템플릿을 고려하시는 것이 좋습니다.
※ 검색엔진 최적화(SEO)란 검색 엔진에서 웹사이트를 검색할 때 더 높은 순위로 노출되도록 웹사이트를 최적화하는 작업입니다. 이를 위해 블로거 혹은 사이트 편집자 들은 HTML 문법을 준수하고 페이지 제목을 구체적으로 작성하며 메타 태그를 활용하고 이미지에 alt 속성을 기재하며 이미지 맵에 중요한 링크를 사용하지 않으며 플래시 전용 페이지를 피하며 anchor 태그를 활용한 적절한 키워드 배치 등의 작업을 수행합니다.
SPEEDY BLOGGER 구글 블로그 테마 다운로드 및 적용
SPEEDY BLOGGER 테마 템플릿의 경우 아래와 같은 장점을 가지고 있습니다.
- 빠른 페이지 로딩 속도
- 라벨 기능을 통한 카테고리 지원
- 광고 설정 용이
- 구글 검색엔진에 친화적
- 상단 메뉴 지원
먼저 위에서 소개한 링크에서 SPEEDY BLOGGER 테마 템플릿을 다운로드 받습니다.
저는 speedy blogger templates link 에서 다운로드를 받았습니다.
해당 페이지 링크를 타고 들어가면 위와 같이 다운로드 항목이 보입니다. 해당 버튼을 클릭해서 다운로드 받으시면 됩니다.
다운로드 받으신 후 다운로드 폴더로 들어가면 위와 같이 zip 파일로 다운이 완료된 것을 보실 수 있습니다.
이제 해당 파일의 압축을 해제합니다.
압축을 해제하면 "Speedy Free Version.xml" 파일이 확인 됩니다.
블로거의 테마로 가서 복원을 통해 다운 받은 "Speedy Free Version.xml"을 적용합니다.
적용 후 모습입니다.
SPEEDY BLOGGER 테마 레이아웃 수정
이제 레이아웃 설정을 통해 좀 더 자신의 블로그에 맞게 수정해 보도록 하겠습니다.
레이아웃을 클릭하면 아래와 같이 레이아웃을 수정할 수 있는 화면이 나옵니다.
먼저 Main Logo의 이미지가 SPEEDY BLOGGER 테마 기본 이미지로 되어있으므로 이 부분을 수정합니다.
SPEEDY BLOGGER 테마 메인 로고 설정
Main Logo의 연필 모양을 눌러서 변경하면 되는데, 그 전에 내 프로필에 내 블로그의 이미지 URL을 가져옵니다.
설정 항목으로 가서 사용자 프로필을 클릭합니다.
이제 다시 레이아웃으로 돌아가서 Main Logo의 연필 모양을 누르면 아래와 같은 화면이 나타납니다. 여기서 이미지 URL에 좀 전에 복사한 값을 붙여넣기 하면 사진이 변경됩니다.
그 후 이미지 위치는 본인의 취향에 맞게 선택해서 저장을 누르고 미리보기를 한 후 선택하시면 됩니다.
미리보기는 레이아웃의 제일 아래 오른쪽에 위치합니다.
SPEEDY BLOGGER 테마 블로그 게시물 설정
다음으로 블로그 게시물은 화면에 노출될 게시물의 수를 정하는 등의 작업을 할 수 있습니다. 저는 8개로 수정해 보았으며, 게시물 페이지 링크 텍스트는 한글과 영문을 모두 포함하도록 수정하였습니다.
SPEEDY BLOGGER 테마 사이드바 설정
사이드 바에는 검색, 인기 게시물, 태그 등이 있는데 저는 대부분의 것들을 사용하지 않을 계획이므로 모두 제거하고 검색과 Popular Post 그리고 카테고리를 남겨놓도록 하겠습니다. 제거는 연필 모양을 눌러서 "이 위젯 표시"를 꺼주시면 됩니다. 아래 이미지에서는 예제로 "Social Plugin"을 제외하는 화면입니다.
기본 가젯 외에 추가 삭제할 수 있는 가젯은 아래와 같이 나타납니다. 이것은 삭제를 누르시면 제거 되며, 추후에 필요하신 경우 다시 가젯 추가를 통해 추가하실 수 있습니다.
테스트 용으로 광고는 모두 보이지 않도록 설정하였습니다.
그 외에 footer menu와 footer attribution은 제거하였습니다. footer info는 제 블로그의 이미지와 설명으로 변경하였습니다. 마지막으로 follow us에는 제 네이버 블로그/유투브/인스타그램 링크를 넣어 놓았습니다.
SPEEDY BLOGGER 테마 라벨 설정
마지막으로, 카테고리를 우측 사이드 바에 설정하였습니다. 그런데 카테고리를 표시하기 위해서는 각 글에 라벨을 입력해야합니다. 저는 글을 작성하면서 라벨을 입력하지 않아 적용이 되지 않고 있습니다.
그러므로, 기 작성한 글에 라벨을 설정해 줍니다. 라벨 설정은 블로거 초안으로 가서 글을 누르신 후 각 글에서 라벨을 설정하는 버튼을 눌러서 설정하시면 됩니다.
SPEEDY BLOGGER 테마 추가 문제 수정
자 이제 모두 설정하고 블로그를 가 보았더니, 제 구글 블로그가 https://www.pikitemplates.com 으로 리디렉션 되고 있었습니다.
무언가 이상하다 싶어서 수정한 내용을 생각해 본결과 copy right가 있는 footer attribution을 삭제한 것이 영향을 미친 것으로 추정되어 해당 copy right가 다시 나오도록 하였습니다.
다시 footer attribution을 추가하였더니 더 이상 pikitemplates로 리디렉션 되는 문제는 사라졌습니다. 나중에 조금 더 공부해서 이 부분을 어떻게 처리한 것인지 확인해 보도록 하겠습니다.
SPEEDY BLOGGER 테마 고급 설정 HTML 수정
SPEEDY BLOGGER 테마 이미지 크기 수정
SPEEDY BLOGGER 테마 템플릿을 적용하면 이미지 높이가 조정되지 않아서 이미지가 제대로 보이지 않는 현상이 발생합니다. 그러므로, 테마 > 맞춤설정 > 고급 > CSS 추가 로 들어가서 이미지 높이를 설정해 줍니다.
위의 이미지와 같이 고급에 드롭다운 버튼을 누르면 마지막에 CSS 추가가 있습니다. 여기에서 다음과 같이 이미지를 설정해 줍니다. 적용 후 우측 하단의 저장을 누르시면 완료됩니다.
.post-body img {
max-width: 100%;
height: auto;
margin: auto;
display: block;
}
SPEEDY BLOGGER 테마 폰트 수정
SPEEDY BLOGGER 테마의 기본 본문 폰트가 크기가 매우 작고 간격이 좁아서 보기 좋지 않습니다. HTML 편집으로 이를 수정해서 본문 및 목록의 폰트 크기를 수정하도록 합니다.
테마 > 맞춤설정의 우측에 있는 ∨ 모양을 눌러서 HTML 편집으로 들어갑니다.
CTRL-F를 눌러서 검색 입력란으로 들어갑니다.
검색 입력란에 ".post-body{width:100%;font-family" 를 입력하여 나오는 부분을 수정해 줍니다.
이전 내용:
.item-post .post-body{width:100%;font-family:var(--text-font);font-size:15px;line-height:1.5em;padding:0;margin:0}
수정 내용:
.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" 를 입력하여 검색 된 라인을 수정합니다.
이전 내용:
.post-body ul{line-height:1.5em;font-weight:400;padding:0 0 0 15px;margin:10px 0}
수정 내용:
.post-body ul{line-height:1.7em;font-weight:400;padding:0 0 0 15px;margin:10px 0}
마지막으로 검색 입력란에 ".post-body li{margi"를 입력하여 아래와 같이 수정합니다.
이전 내용:
.post-body li{margin:5px 0;padding:0;line-height:1.5em}
수정 내용:
.post-body li{margin:5px 0;padding:0;line-height:1.7em}
모두 수정되었으면 우측 위에 있는 저장을 누릅니다.
링크 텍스트 색상 변경
기존 링크 텍스트 색상은 아래와 같습니다. #112b3e
이것을 변경해 줍니다. #0100FF 로 변경하였습니다.
검색창에 "112b3e"를 검색하면 나오는 HTML을 확인하고 해당 부분을 아래와 같이 변경해 줍니다.
<Variable name="body.link.color" description="Body Link Color" type="color" default="$(main.color)" value="#0100FF"/>
SPEEDY BLOGGER 테마 고급 설정 시 주의 사항
애드센스 승인이 나지 않은 상태에서 "SPEEDY BLOGGER 테마 고급 설정 HTML 수정"를 수정하게 되면 아래와 같은 에러가 발생합니다.
"The widget settings in widget with id <b>AdSense1</b> is not valid. An internal error occurred. Please try again."
위의 문제는 애드센스 승인이 나지 않은 상태에서 해당 HTML에 애드센스가 들어있어 발생하는 문제입니다.
아래와 같이 블로거 홈에서 "수익"으로 가셔서 블로그에서 애드센스를 삭제 한 후 진행하시면 문제없이 진행됩니다. 나중에 애드센스가 승인나면 그 때 다시 추가하시면 됩니다.
애드센스를 삭제하고 나면 아래와 같은 화면이 나타납니다. 나중에 승인이 나면 애드센스 연결을 눌러서 연결해 주시면 됩니다.
SPEEDY BLOGGER 테마 템플릿 적용 결과
여기까지 읽어 주셔서 감사합니다.
.png)
