구글 Blogger 템플릿 - 게시물 헤더부분 커스터마이징

by hfkais | 2012. 6. 14. | 14 comments

※ 템플릿 수정은 많은 시행착오를 겪어야 합니다. 여러 번 수정을 거쳐야 할 수 있습니다. 따라서 현재 운영중인 블로그에 바로 적용하지 말고, 별도의 템플릿 편집용 블로그를 만들어 충분한 테스트를 거친 뒤 반영하는 방식을 추천합니다. 구글 Blogger에서는 여러 개의 블로그를 만들 수 있으므로, 꼭 테스트용 블로그를 하나 만들어 해보세요.

 

팁을 설명하기에 앞서, 구글 블로거에 대한 몇 가지 이해가 필요합니다. 블로거 도움말을 꼭 읽어보세요.

- 블로그 레이아웃의 HTML 수정

- 레이아웃용 Widget 태그

- 레이아웃용 페이지 요소 태그

 

간단히 방법만 적어보겠습니다.

블로그 설정화면으로 들어갑니다. '템플릿' - 'HTML편집' 버튼을 누릅니다.

경고문이 나오는데, 한번 읽어본 뒤 '계속' 버튼을 누릅니다.

HTML코드가 출력됩니다. 이것만으론 러프한 편집만 가능하고, 실제 디테일한 부분을 수정하려면 상단의 '가젯 코드 펼쳐서 보여주기' 에 체크합니다. 가젯 코드들이 확장되어 실제 코드들이 보입니다.

찾기(Ctrl + F) 기능을 이용해, '<div class='blog-posts hfeed'>' 부분을 검색합니다. 기본 템플릿이라면 비슷한 부분이 두 개가 나올 겁니다. 위쪽은 안에 인클루딩되는 내용에 관련된 부분이고, 실제 화면에 보여지는 부분은 아랫쪽입니다. 따라서 우리는 아랫쪽 부분을 수정해주면 됩니다.

날짜에 해당하는 부분은

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

입니다. 자세히 보시면, 클래스명과 태그명을 통해 이게 무슨 기능을 하는지 대충 알 수 있습니다. 역으로, 현재 블로그 화면 내에 표시되고 있는 부분을 템플릿에서 찾을 수도 있습니다. 가령 블로거 기본 템플릿에서 날짜 부분의 HTML소스를 확인해보면(크롬에서 F12키, 개발자 툴 이용) <h2 class="date-header"> 와 같은 클래스네임을 가진 h2 태그로 둘러싸인 걸 볼 수 있죠. 따라서 템플릿 태그 내에서도 같은 부분을 찾아보면 됩니다. 다시 위를 보시면, 날짜에 해당하는 부분에 <h2 class='date-header'> 가 있죠? 이런 식으로 블로그 페이지 내에서 어떤 부분이 어떤 템플릿 코드에 해당하는지 찾아볼 수 있습니다.

기본적으로는 이렇게 알아낸 코드들의 순서를 바꿔주고, CSS로 위치를 다시 잡아주면서 정렬하게 됩니다. 제 블로그 게시물페이지 상단에 설정된 템플릿 코드는 다음과 같습니다.

 

<div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>

<data:adStart/>
<h4><a class='bk' expr:href='data:post.url'><data:post.title/></a></h4>
<data:adEnd/>
<h3 class='date-header' style='float: left'>

<data:post.dateHeader/> |
<a class='bk2' expr:href='data:post.addCommentUrl'><span class='brd'><data:post.numComments/></span> comments</a>
</h3>

 

h4 태그를 이용해 게시물 제목을 나타냈습니다. <data:post.title/>이 바로 게시물의 제목을 나타내주는 템플릿 코드이지요. <data:post.dateHeader/> 는 보시다시피 날짜를 나타냅니다. <data:post.numComments/>는 게시물에 달린 댓글 수를 나타내지요.

이런 식으로, 간단하게 각 요소가 나타나는 순서를 변경해줄 수 있습니다. 모양을 꾸미는 것은 CSS를 통해 처리합니다. 템플릿 코드와는 달리 CSS는 소스보기를 통해서 쉽게 확인하실 수 있으니 제 블로그를 직접 뜯어보시면(?) 아실 수 있을 겁니다(크롬의 개발자 도구를 이용해 보세요). 또한 간단한 CSS 변경에 대해서는 웹에 강좌가 많으니, 구글링을 통해 찾아보도록 합시다.

우선 급하게 요점만 적어 써둡니다. 나중에 좀 더 쉽고 자세히 설명해보도록 하겠습니다.

댓글 14개:

  1. 감사합니다 이따가 해볼게요 지금 주식시장 보는중이라서요

    답글삭제
  2. 위부분 코드는 찻았는데 그걸 지우고 아래에 코드를 넣어주나요??

    답글삭제
    답글
    1. 네 해당 코드를 바꿔주면 됩니다. 교체 하시기 전에 항상 기존 템플릿 코드는 꼭 백업해 두세요. 테스트용 블로그를 따로 운영하는 게 좋습니다.

      삭제
  3. 이래 저래 감사합니다 꾸벅 글도 남겨주시고^^

    답글삭제
    답글
    1. 여유생기면 더 자세히 한번 써볼께요 ^^

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

    답글삭제
  5. Kais님 덕에 블로그 템플릿을 이해하는데, 많은 도움을 받았습니다.
    메인화면과 개별 포스트의 헤더와 푸터를 차별화하려는 시도를 하다가
    뭔가 꼬여서 막막했는데, 왠지 잘 될 것 같다는 예감이 듭니다.

    답글삭제
    답글
    1. 블로거의 템플릿은 메인용, 목록용, 포스트용 세 가지 조건을 사용할 수 있으므로 말씀하신 구성도 충분히 가능하지 않을까 싶습니다. 도움이 되어 기쁩니다. 구글신께 의지하시면(?) 더 좋은 방법을 찾을 수 있지 않을까 싶네요.

      삭제
    2. 개별포스트용에서만 footer가 나타나도록 만드는데 성공했네요. 다시 한번 감사드려요.

      삭제
  6. 테마를 하나 받았는데 적용시켜 보니 레이아웃이 이상하더군요..
    블로그 게시물은 중간에 보통 하나 있어야 되는데 오른쪽 사이드바에도 블로그 게시물 레이아웃이 있어 지워지지도 않고 html 편집을 해야될 거 같은데 어떻게 해야하나요?
    제발 도와주세요

    jsc0273@gmail.com

    답글삭제
  7. 위 댓글과 동일인입니다. http://jscarp.blogspot.kr 들어가셔서 레이아웃 보시고 설명좀 해주시면 감사하겠습니다 ㅠㅠ

    답글삭제
    답글
    1. 지금 들어가보니 정상적으로 보이는데요, 벌써 고치신 모양이죠?

      삭제
    2. 그리고 Blogger에 문제가 생겼을 때 https://plus.google.com/communities/101599739929385832752 구글플러스 커뮤니티에서 물어보시면 많은 분들이 도와주실 겁니다.

      삭제
  8. 으... 어떻게 해야할지 전혀 감을 못잡겠네요 @△@

    답글삭제

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

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