구글 Blogger용 템플릿 공개 - photolog

by hfkais | 2009. 8. 31. | 16 comments

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

 

photolog 템플릿

템플릿 소개

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개의 단이 제대로 표시됩니다.

photolog 템플릿

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

 

템플릿 다운로드 & 적용

snap_3336

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

템플릿 다운로드

 

템플릿 수정

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

 

photolog 템플릿

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

 

photolog 템플릿

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

 

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

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

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

 

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

템플릿 다운로드

댓글 16개:

  1. 와~ 이렇게 템플릿을 공개해 주셔서 고맙습니다. 3단 사이드바가 필요했는데, 나중에 시간이 되어 템플릿을 변경하면 참고하겠습니다.

    수고하셨습니다.

    답글삭제
  2. 블로거닷컴을 어떤 용도로 사용할까 고민하고 있었는데 사진블로그로 이용해봐야 겠어요..

    답글삭제
  3. 오 멋집니다.
    국내에는 템플릿 만드시는 분이 별로없으신것 같던데,,
    고맙습니다.^^

    답글삭제
  4. zizukabi 님 / 저도 시간 나면 3단 사이드바 템플릿을 만들어볼 생각입니다. 요게 은근히 재밌네요.

    softroom 님 / 블로그 오픈하시게 되면 꼭 주소 알려주세요!

    knight4u 님 / 국내에도 blogger 사용자가 많아졌으면 좋겠어요. 칭찬 감사합니다 (__ )

    답글삭제
  5. 전 지금 블로그시작하려는데 기본 템플릿 설정후엔 도통 방법을 모르겠어요.
    뭐하나만 잘못 건드려도 설정이 이상하게 뒤죽박죽되고.
    괜찮으시다면 기본적인 (게시칸의 너비를 줄인다거나) 변경방법을 알려주세요.

    답글삭제
  6. 아 원래 이미지 올리는건 400픽셀 이상으로 지원하지 않는가 보군요ㅋ 전 몇시간째 한참 헤맸었네요 ;;;

    답글삭제
  7. Re 님 / Blogger 자체 에디터에서는 400px정도로 자동 리사이즈 되고요, 피카사나 플리커에 올린 뒤 링크하시면 더 큰 사이즈로 올리실 수 있습니다.

    답글삭제
  8. 풋터 세개로 어떻게 하는건가요... ㅠ ㅠ
    아무리 드래그를 해 보아도 1열로밖에 안되던데..

    답글삭제
  9. 마이구루 님/ 구성요소를 드래그해서 옮기는 건 그냥 위치만 옮겨주는 겁니다. 푸터를 늘리려면 HTML수정에서 푸터 영역을 추가시킨 뒤, 이를 DIV 태그 등을 이용해서 레이아웃 설정을 해주어야 합니다. 푸터가 추가되면 '가젯추가'란 글자가 여러개 보이게 됩니다. HTML과 CSS에 대한 지식이 필요합니다.

    답글삭제
  10. 작성자가 댓글을 삭제했습니다.

    답글삭제
  11. 감사합니다. 이제 막 시작했는데 어떻게 꾸밀지 막막했거든요. 잘 쓸께요^^
    저 그런데 뭐 하나 물어봐도 될까요?
    블로그에 있는 검색창 테두리가 청록색으로 표시되는데 그 부분 색을 바꿔주고 싶어요. 어떻게 해야하나요.

    답글삭제
  12. Chloe 님 / 검색창 테두리라면 CSS를 이용해 색을 바꿀 수 있을 것 같네요..

    답글삭제
  13. 학교에서 영어수행평가로 blogger에 블로그하나씩 만들라그랬는데 어렵네요ㅎㅎ
    나름 네이버블로그를 정복했다고 만만한줄알았는뎈ㅋ
    그나마 html을 쓸줄 알아서 다행이지 안그랬으면 정말 답이 없을것같더군요
    덕분에 우리조는 칭찬받았지만요ㅋㅋ

    답글삭제
  14. 먼저 아래에 링크된 xml 파일을 다운로드 받으세요. Blogger에 로그인한 뒤, 템플릿을 바꿀 블로그의 환경설정 화면에서 '레이아웃' - 'HTML편집' 을 차례대로 클릭하세요. '하드 드라이브의 파일에서 템플릿 업로드' 항목을 찾은 뒤, 다운로드 받은 xml 파일을 업로드 하면 됩니다.
    라고하셨는데요.아무리 찾아바도 다운로드,업로드 하는곳이어디있는지요..하루종일 찾는중입니다.ㅠㅠㅠㅠㅠㅠㅠ.도와주세요

    답글삭제
    답글
    1. 다운로드는 http://www.box.com/shared/dulc0bky66 에서, 업로드는 blogger 설정화면에서 템플릿 - HTML편집 에서 복사해 넣으시면 됩니다.

      삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 1~3일 내에 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.