구글 Blogger용 템플릿 공개 - photolog

한동안 블로그에 좀 뜸했죠? 그간 뭘 했는고 하니, 구글 Blogger에 쓸 템플릿을 만들고 있었습니다. 지난번에 했던 블로그 리뉴얼에서 자신감을 얻어 작업을 시작했죠. 새 템플릿은 사진 블로그를 위해 만들어 졌습니다. 커다란 사진들을 올릴 수 있게 레이아웃을 바꾸고, 사진 감상에 용이하도록 배경색도 조절했습니다. 그리고 웬만하면 Blogger의 템플릿 구조를 잘 모르는 분도 쉽게 쓸 수 있도록 만들었습니다.

 

템플릿 소개

1. 레이아웃
여러 포토블로그들을 참고하여 흔히 쓰는 레이아웃으로 바꾸었습니다. 게시물을 1단으로 만들고, 사이드바를 아래로 옮겼죠. 보다시피 원래는 1개였던 사이드바 영역을 3개로 나누었습니다. Blogger에 삽입되는 가젯들은 각 사이드바 영역 아무 곳에나 배치할 수 있습니다. 요걸 조금만 수정하면 티스토리에서 많이 쓰이는 세로 3단짜리 템플릿도 만들 수 있을 것 같습니다(다음에 한 번 도전해 볼까요?).

2. 헤더
기본적으로 포함되는 블로그 제목과 설명 외에 검색창과 별도 메뉴를 추가시켰습니다. 검색창은 Blogger 가젯으로 제공되는 것을 썼습니다. 이게 원래 헤더에 잘 안 들어가지만 하단에 있는 것보단 나을 거 같아 헤더에 집어넣었습니다(검색 결과는 게시물 위쪽에 표시됩니다).

그리고 직접 링크 주소를 적을 수 있는 메뉴를 추가했습니다. 기본으로 Home, RSS Feed, Comment Feed 링크가 들어가 있는데 이 부분은 HTML수정에서 직접 바꿔주시면 됩니다.

3. 게시물 & 이미지
게시물에 큰 사진을 넣을 수 있게 가로 사이즈를 1000px로 잡았습니다. 1000px보다 작은 이미지를 넣어도 알아서 가운데로 정렬됩니다. 그런데 Blogger에 직접 올리는 사진은 큰 사이즈를 지원하지 않죠. 기껏해야 400px 입니다. 구글에서 제공하는 피카사 웹앨범에서도 블로그에 퍼갈 땐 800px 이하의 크기밖에 지원하지 않습니다.

그래서 전 Flickr를 추천해 드립니다. 이미지를 1000px 정도로 리사이즈한 뒤 플리커에 올리면 그 사이즈 그대로 블로그에 쓸 수 있거든요. 비록 이미지를 따로 올리고 태그를 복사해와야 한다는 불편함이 있지만 금방 적응한다면 괜찮겠죠. 아니면 기타 이미지 업로드 서비스를 이용하시는 것도 좋고요.

4. 사이드바 & 푸터
이 템플릿의 가장 큰 특징인 하단 3개짜리 사이드바 입니다. 원래 Blogger의 사이드바는 한 개 짜리죠. 이걸 3개로 나누어 코딩했는데, 다행스럽게도 제대로 동작하더군요. 각 단은 가로 300px의 크기를 가지며, 가젯들은 3개의 단 중 아무 곳에나 위치시킬 수 있습니다. 대시보드의 레이아웃 편집 화면에서도 3개의 단이 제대로 표시됩니다.

그리고 각 위젯들은 사이드바 아래의 푸터에도 넣을 수 있습니다. 대신 푸터는 가로 너비 1000px의 1단 짜리지요. 기능만 놓고 본다면 사이드바와 별 차이가 없는 것 같기도 합니다. 푸터엔 기본적으로 copyright 정보가 들어가 있는데, 자신의 입맛대로 텍스트를 바꿔주시면 됩니다.

 

템플릿 다운로드 & 적용

먼저 아래에 링크된 xml 파일을 다운로드 받으세요. Blogger에 로그인한 뒤, 템플릿을 바꿀 블로그의 환경설정 화면에서 '레이아웃' - 'HTML편집' 을 차례대로 클릭하세요. '하드 드라이브의 파일에서 템플릿 업로드' 항목을 찾은 뒤, 다운로드 받은 xml 파일을 업로드 하면 됩니다.

템플릿 다운로드

 

템플릿 수정

xml 파일의 업로드가 제대로 이루어졌다면 'HTML편집' 화면의 아래쪽 '템플릿 수정' 란에 HTML코드가 나타날 겁니다. '도구 템플릿 확장'에 체크한 뒤, 몇몇 부분의 HTML 코드를 직접 수정해 줍니다.

 

▲ 코드의 맨 윗부분에서 keywords 부분을 찾아 자신의 블로그에 맞는 키워드들로 채워줍니다. 콤마(,)로 구분해주면 됩니다. 예를 들어 '사진, 카메라, photo, camera, picture' 와 같이 입력할 수도 있겠네요.

 

▲ 메뉴 부분을 찾아 링크와 텍스트를 수정해 줍니다. Ctrl + F (찾기) 기능을 이용하면 좋습니다. betakais.blogspot.com 이라고 쓰여진 부분을 자신의 블로그 주소에 맞게 수정합니다. 더 추가할 링크가 있다면 기존 태그를 참조해서 추가해 줍니다.

 

이렇게 수정해주고 '미리 보기' 버튼을 클릭해 제대로 표시되는지 확인한 뒤, 주황색 '템플릿 저장' 버튼을 누르면 끝! 이제 재미있게 블로깅 하시면 됩니다.

만약 Blogger 템플릿 코드와 CSS에 대해 잘 아시는 분이라면 직접 코드를 수정해서 쓰셔도 좋습니다. 브라우저 테스트 결과 IE, 파이어폭스, 크롬 등의 브라우저에서 큰 이상 없이 잘 표시되고 있네요. 사실 IE6만 주의하면 나머진 대체로 비슷하게 나오는지라... ㅡㅡ; 다만 Blogger의 몇몇 가젯들 중 일부는 가젯 자체의 문제로 인해 IE6에서 제대로 표시되지 않을 수도 있습니다(대표적으로 '관심 있는 사용자' 가젯. 이건 제 탓이 아녜요~).

현재 betakais.blogspot.com 에서 이 템플릿의 기본형이 실제로 적용된 모습을 보실 수 있으며, 저의 새로운 사진블로그인 photokais.blogspot.com 에도 이 템플릿이 적용되어 있습니다. 여기엔 약간의 수정을 거쳐 광고도 달고, 이런 저런 가젯도 달았지요. 참고하시면 좋을 것 같네요.

 

어설프게나마 Blogger 템플릿을 만들었는데, '이걸 과연 누가 쓰려나…' 하는 생각이 듭니다. 한편으론 너무 제 스타일에 맞춰 만든 건 아닐까 싶기도 하고요. 단 한 분이라도 써주신다면 정말 기분 좋을 것 같아요. 아니면 이 템플릿을 베이스로 더 멋진 템플릿을 만들어도 좋을 것 같고요. 부디 유용하게 쓰시는 분이 꼭 있었으면….

템플릿 다운로드