구글 블로그 글 목록에 포스트 제목만 나오게 하는 방법

How to show only titles in Label and Archive pages in blogger

 라벨 링크를 누르거나 글 목록 링크를 눌러 이동하는 페이지에 해당 글 제목만 표시하려면 템플릿 HTML 편집에서 관련 코드만 추가해 주면 된다.

 구글 블로거에서 라벨이나 글목록 링크를 눌러서 해당 페이지로 이동하면 관련된 글들의 전체 내용이 전부 출력된다. 관련 글들에 대해 한눈에 파악해서 원하는 글을 찾기가 쉽지 않기 때문에 일반적으로 선호하지 않는 양식이지만 구글 블로거에서는 기본적으로 이와 같은 형식을 제공한다. 관련 글들에 대한 전체 내용을 전부 불러오기 때문에 로딩 시간을 길게 만드는 불편함을 줄 수 있고, 수많은 글 중에 원하는 정보가 있어도 참을성 많지 않은 방문자는 떠날 것이다. 다행히도, 간단하게 HTML 코드의 추가하여 쉽게 바꿀 수 있다.




 블로그에는 라벨 페이지와 글목록 페이지에 제목만 나오도록 하는 방법은 아래 절차와 같다.

1. 블로거 관리자 로그인 ⇒ 템플릿(Theme) ⇒ HTML 편집으로 들어간다.

2. HTML 편집 창에서 Ctrl+F로 <b:include data='post' name='post'/> 코드를 검색한다. 우측 상단에 있는 「백업/복원」버튼으로 백업을 할 수 있다. HTML 편집으로 템플릿을 수정 시 잘못 입력하면 블로그가 정상적으로 동작하지 않을 수 있으므로 수정전에 백업을 해두는 것이 좋다.

3. 해당 코드를 지우고, 아래 코드를 입력한다.

<!--Only title in Label and archive page start-->
        <b:if cond='data:blog.homepageUrl!= data:blog.url'>
            <b:if cond='data:blog.pageType != "item"'>
                <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
            <b:else/>
                <b:include data='post' name='post'/>
            </b:if>
        <b:else/>
            <b:include data='post' name='post'/>
        </b:if>
<!--Only title in Label and archive page End-->

4. 저장 후 View Post를 클릭하여 변경되었는지 확인한다



※참고※
 글목록의 스타일을 바꾸는 방법은 아래와 같이 두 가지 방법이 있다.
1. HTML 편집
 위에서 입력한 코드 중 <h3> 태그 안에 style 속성을 변경한다.

<h3 class="title-only" style="margin-bottom: 15px;"></h3>
<a expr:href="data:post.url" href="https://draft.blogger.com/null"><data:post .title=""></data:post></a></h3>

2. CSS 추가
 CSS에 글목록에 대한 스타일을 넣어준다. (CSS 스타일은 </b:skin>앞에 넣어주면 된다.)
.title-only {/* 여기 CSS 코드를 넣어주면 된다. */}


 블로그에 방문자가 한눈에 볼 수 있도록 라벨 페이지 등을 정리한다면 방문자의 편의를 높여 블로그에 더 머물 수 있도록 유도할 것이다.