2014년 8월 1일 금요일

페이지에 글제목만 나오게 하는 방법


블로거에 라벨별 목록 페이지 만들기

http://www.kalkin.tk/2012/11/blogger-toc-page-maker.html



구글 블로거의 라벨 페이지와 글목록 페이지에 글제목만 나오게 하는 방법


한국식 블로그들은 카테고리 목록에 제목만 뜨게 되어 있는 경우가 많다.
하지만 구글 블로거에서 라벨이나 글목록 링크를 눌러서 라벨 페이지, 혹은 글목록 페이지에 들어가면, 글의 제목만 뜨는 것이 아니라, 원래 블로그의 디자인대로 뜨게 된다. 만약에 블로그의 디자인이 글의 내용이 모두 뜨도록 되어 있다면, 라벨 페이지에서도 글이 모두 뜨고, 만약에 블로그 디자인이 글의 내용을 일부만 보여주도록 되어 있다면, 라벨 페이지에서도 글의 내용이 일부만 보여지게 된다.

물론 블로거의 이런 방식이 마음에 드는 사람들도 있겠지만, 라벨 페이지에서 글 내용이 모두 뜨게 되면, 방문자들이 글들을 훑어보는 것이 매우 힘들 수 있다. 많은 글이 있는 블로그일수록 더욱 더 불편해질 수 밖에 없다. 또한, 라벨 페이지나 글목록 페이지의 로딩 시간을 길게 만들기 때문에 불편함이 가중될 수 있다.

그래서 이 블로그에는 라벨 페이지와 글목록 페이지에 글의 제목만 뜨도록 해놓았다. 지금부터 그 방법을 설명해보려 한다.

1. 블로거에 로그인한다.

2. 대시보드 ⇒ 템플릿 ⇒ HTML 편집 으로 들어간다.

3. HTML 편집을 통해 템플릿을 수정할 때, 잘못 수정해서 오류가 나는 경우, 블로그가 정상적으로 작동하지 않을 수 있으므로, 수정전에 백업을 미리 해놓는 것이 좋다. 백업을 우상단에 있는 「백업/복원」버튼을 눌러서 할 수 있다.

4. 키보드의 「Ctrl+F」 키를 눌러서 아래의 코드를 검색한다.
<b:include data='post' name='post'/>
5. 그 코드를 다음의 코드로 대체한다. (즉, 검색으로 찾은 코드를 지우고, 그 자리에 다음의 코드를 붙여 넣으면 된다.)
<!--Label and archive page title only hack Start-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Label and archive page title only hack End-->
6. 「템플릿 저장」 버튼을 눌러서 템플릿을 저장한다.

7. 정상적으로 템플릿이 수정되었다면 다음과 같이 라벨 페이지와 글목록 페이지에 제목만 나오게 될 것이다.














8. 만약에 글목록의 스타일을 바꾸고 싶다면 두가지 방법이 있다.
  • 아래의 예처럼, 위의 코드 중 <h3>태그 안에 style 속성을 이용해서 스타일을 바꾼다.
  • <h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
  • 아래의 예처럼 CSS에 글목록에 대한 스타일을 넣어준다. (CSS 스타일은 ]]></b:skin> 앞에 넣어주면 된다.)
    .title-only {
    /* 여기에 알맞은 CSS 코드를 넣어주면 된다. */
    }
Print Friendly and PDF

댓글 없음:

댓글 쓰기