최근 게시물
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>

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

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

유익하셨다면, 추천 버튼 꾹!

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

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

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

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

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

      삭제

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

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