2012. 9. 5.

구글 블로그: 기본 페이지 글목록의 날짜표시 설정

구글 블로그는 첫페이지에 몇개의 최신 글을 나타나게 할 것인지 정할 수 있다. 여기에 점프 브레이크 기능을 이용하면, 글의 앞부분만을 보여주는 글목록을 기본 페이지에 생성시킬 수 있게 된다. 이렇게 기본페이지에 보여지는 글목록의 경우, 동일한 날에 포스팅된 글은 위에 한번만 날짜가 표시된다. 즉, 2012년 9월 4일에 두 개의 글을 올렸다면, 2012년 9월 4일이라는 날짜 표시 아래 연달아 두개의 글 제목과 내용이 나타나게 된다. 오늘의 포스팅은 기본페이지 글 목록에서 각각의 글 위에 모두 날짜표시가 표시되도록 하는 방법이다.


기본 설정에서 나타나는 첫 페이지 모습

구글블로그의 기본 날짜 표시

위에서 보듯이 동일한 날에 올린 포스트는 한 번의 날짜 표시 아래 표시되도록 되어있다. 이러한 레이아웃의 장점은 당연히 같은 날 쓴 글이 한 묶음으로 보여질 수 있다는 점이다.

그러나 사람에 따라서는, 날짜 없이 따라 붙는 포스트의 경우 뭔가 허전하게 여겨질 수도 있는 것이다. 오늘의 팁은 그런 사람들을 위한 것이다.

우선 시작 전에 템플릿 백업을 실행하자. 오늘 작업은 여느 때보다 더 실수할 확률이 높은 작업이니 반드시 백업을 실행하기를 권장한다.

1단계: 첫페이지 날짜표시 템플릿 코드 수정


html 편집을 열고, '가젯 코드 펼쳐서 보여주기'에 체크한다. 그리고 브라우저의 찾기 기능(Ctrl+f)을 켜서, 템플릿 내용 중 다음을 찾는다.

<b:if cond='data:post.isDateStart'>

위의 코드는 포스트의 날짜표시에 대한 코드들의 시작 부분이며, 그 단락은 아래와 같은 식으로 나타나게 된다.

       <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

위의 코드 중 아래 오렌지색으로 표시한 부분을  삭제하거나, 주석처리 해 준다.

<!--    <b:if cond='data:post.isDateStart'> -->
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
<!--    </b:if> -->
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-outer&quot;&gt;
<!--    </b:if> -->
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-posts&quot;&gt;
<!--    </b:if> -->

이것으로 주어진 템플릿 코드 수정은 끝이다. 템플릿 종류에 따라 약간 내용이 다를 수 있으니, 세심히 작업해야 한다. 위와 완전히 동일하다면, 그대로 주석처리된 위의 내용으로 수정되기 전의 코드를 대체해도 된다.

2단계: 자바스크립트 코드 삽입

다음에 해야할 일은 자바스크립트 코드를 삽입하는 일이다.

우선 다음의 코드를 검색창에 넣어서 찾는다.

<div class='blog-posts hfeed'>

이 코드를 찾았다면, 바로 다음 줄에 아래의 자바스크립트 코드를 삽입해 준다

<script type='text/javascript'> var postDate=&quot;&quot;; </script>

다시 20 줄 정도 아래로 내려가면, 아래와 같은 코드가 나온다.

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

위의 코드 바로 아랫줄에 다음의 자바스크립트 코드를 삽입한다.

<script type='text/javascript'> postDate = &quot;<data:post.dateHeader/>&quot;; </script>
<b:else/>
<h2 class='date-header'><span><script type='text/javascript'>  document.write(postDate); </script></span></h2>

위의 코드를 적용시키고 나면, 아래와 같이 매 포스트마다 날짜가 표시된다.

모든 포스트에 날짜 표시 적용


9 개의 댓글:
  1. 댓글창에서 작성자 프로필 선택하는 것도 멋지고,
    이메일 구독이 바로 지원되는 것도 신기해요~ ^^
    이미 다른 소스와 팁에 대해서도 포스팅 하셨을지도 몰라서 헬라인님의 다른 글 검색해서 찾아보고 싶은데, 검색창을 아직 못 찾고 있어요... ㅜㅜ

    답글삭제
    답글
    1. 못 찾으신게 아니라, 없는 거랍니다. 제가 아직 제 블로그에 검색창이 필요하리라는 생각을 해본적이 없어서요. 만들어야겠네요. 라라윈님이 제 팬心을 refresh하셨습니다.

      하지만, 작성자프로필과 이메일구독은 구글제공이랍니다. 설치형 블로그에서 이런 기능을 구현하는 문제에 대해 생각해 본 적이 없었는데, 호기심 발동 *_~

      삭제
  2. 먼저 반갑습니다... 저도 독일서 살고 있는데..^^
    점프 브레이커 적용할때 님처럼 글 앞부분만 나타나게 하고, 글 더보기 표시 아랫부분에 하고 라벨과 피드 태그를 안 보이게 하려면 어떻게 해야 할까요?
    답변 부탁드릴게요.. 감사합니다.

    답글삭제
    답글
    1. 저도 반갑습니다. sustainable-land-use님!!!
      무엇이 궁금하신지 잘 이해했습니다. 제 블로그 공유버튼들은 커스텀으로 적용시킨 거라 상황이 좀 다르긴 하지만, 기본 템플릿으로 실험해 보고 방법을 찾아냈습니다.
      답글로 설명드리기는 좀 어려울 것 같아서, 이 부분에 대하여 포스팅을 하겠습니다.
      지금 즉시 시작합니다. 몇 시간만 기다리시면...

      삭제
  3. 안녕하세요, 몇일전부터 블로깅을 시작했는데요 :)
    덕분에 좋은 정보들 많이 알아갑니다.
    근데 한가지 궁금한 점이 있어서요~
    형석님의 카테고리는 가나다라 순이 아닌것 같은데 라벨 순서를 마음대로 할수있는 방법이 있나요? 저는 어쩔수없이 앞에 숫자를 붙여넣어봤는데, 제 뜻대로 정리가 잘 안되네요~
    감사합니다 :)

    답글삭제
  4. 아, 한가지만 더 여쭤볼께요
    카테고리에 태그들에 상위태그, 하위태그가 설정되어 있는데 이것도 어떻게 설정하신건지도 좀 알려주시면 감사하겠습니다 ^^; 블로거 기본 템플릿에서는 만들수 없는 기능인지요?

    답글삭제
    답글
    1. 두가지 질문 모두 답은 하나입니다. Blogger.com의 기본 위젯 중 레이블 위젯을 사용하지 않았기 때문입니다.
      대신 html위젯을 선택하여, html코드와 java script를 이용하여 레이블 순서를 제 의도대로 배열하고, 상위와 하위의 개념을 부여해 카테고리화 시킨 것입니다.
      구체적인 코드에 대해서는 답글로 설명드리기가 어렵고, 제가 포스팅할 여유가 없으니 다른 분의 포스트를 소개해 드릴께요.
      http://creatorhong.blogspot.de/2012/03/bolgger.html
      여기 가시면 제가 사용한 코드와 거의 유사한 코드 설명이 있습니다.

      삭제
    2. 바쁘신 와중에 답변 주셔서 감사합니다~
      좋은하루 되세요~

      삭제

Gmail 사용자는 댓글 입력창 오른쪽 아래 '이메일로 구독'을 누르시면,
후속 댓글을 간편히 메일로 전송받으실 수 있습니다.

내 사진
독일에서 유학 중.
취미는 자전거 타기.