2013/08/14

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

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

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

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

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

댓글 64개 :

  1. 바로 이거였어요! 정말 감사드려요^^

    답글삭제
    답글
    1. 적용해보시고 잘안되시면 댓글 달아주세요. ^^

      삭제
  2. 글갯수 설정은 어떻게 할수 있는지 궁금합니다 ^^

    답글삭제
    답글
    1. 템플릿, html 편집으로 들어가셔서 아래 코드를 찾습니다.
      expr:href='data:label.url'

      그 후에 아래 코드와 같은 형식으로 바꿔주시면 됩니다. 예시에는 150개로 해놓았는데, 숫자는 원하시는 숫자로 설정하시면 되구요.
      expr:href='data:label.url + "?max-results=150"'

      삭제
    2. 와 빠른 답변 감사드립니다...근대 안되요 ㅠㅠ

      expr:href='data:label.url' 검색하니 3부분이 나옵니다.

      이거 3개다 바꿔줘야되는지 궁금합니다 ㅠㅠ

      삭제
    3. 네. 모두 바꿔주셔야 합니다.

      삭제
    4. 모두 다 바꾸었는대도 이상하게 안나옵니다...ㅠㅠ

      삭제
    5. 이상하네요. 전에는 됐던 팁인데...
      제가 나중에 확인해보고 다시 댓글 달도록 하겠습니다.

      삭제
    6. 네 신경써주셔서 감사합니다!

      삭제
    7. 검색도 해보고 했는데, 방법이 없네요. 어떤 블로그에서는 되고 어떤 블로그에서는 안되는군요. 해결방법을 알려드리지 못해서 죄송합니다.

      삭제
    8. 흐규흐규 ㅠㅠ
      노력감사드립니다.

      삭제
  3. 감사합니다.
    저도 잘 사용하겠습니다. ^^

    답글삭제
    답글
    1. 저도 블로그에 찾아와주셔서 감사합니다. ^^

      삭제
  4. expr:href='data:label.url' 를 검색해봐도 아무것도 뜨질 않네요..

    이상해서 expr:href= 를 입력하니;; 너무 많은 코드가 뜨는데;;

    글 갯수 늘릴려면 어떻게 해야 되나요??

    답글삭제
    답글
    1. 우선 한 페이지에 나오는 글 개수를 늘리는 팁은 템플릿에 따라 적용될수도, 안될수도 있습니다. 그래서 제대로 수정했더라도 원하는 결과가 안나오는 경우가 있을 수 있습니다.

      그걸 확인하시려면 우선 레이블을 클릭해서 레이블 목록 페이지로 들어가신 후에, 주소창 맨 뒤에 "?max-results=150" 을 붙여보세요. 그렇게 해서 글 목록의 수가 늘어난다면, 현재 템플릿은 저 팁이 잘 적용되는 템플릿입니다.

      만약 저 팁이 적용되는 템플릿이라면 다음에는, data:label.url 로 검색해 보시는 것이 좋을 것 같습니다. 그렇게 해서 나오는 부분을 data:label.url + "?max-results=150 과 같은 형태로 바꿔주면 될 것 같습니다.

      삭제
  5. 블로그 관리자가 댓글을 삭제했습니다.

    답글삭제
    답글
    1. 48시간 전 티스토리초대장 충전 문제로 짜증나서 블로그스팟을 이용하게 되었는데요.
      님 홈피 메인에 있는 글목록만들기는 어떻게 하면 되는지요. 알려줄 수 있는 싸이트가 있을까요..
      자주 놀러 올께요. 사실 자주 놀러 올 듯 해요.ㅋㅋ

      삭제
    2. 메인 페이지에 있는 글목록에 썸네일 이미지와 글의 일부가 나오게 하는 방법이라면 크게 세가지 방법이 있습니다.

      1. 블로거에서 기본 제공하는 점프 브레이크 기능 이용하기
      글을 쓸 때마다 점프 브레이크를 삽입해서 점프 브레이크 이전의 글을 메인 페이지에 나오게 하는 방법입니다. 아래 링크를 참조하세요.
      구글 블로그: 점프브레이크 스타일 편집

      2. 자바스크립트 코드를 이용해서 자동으로 썸네일 이미지와 일부글이 메인 페이지에 나오도록 하는 방법
      템플릿을 수정해서 자동으로 썸네일 이미지와 글의 일부가 메인 페이지에 나오게 하는 방법입니다. 아무래도 직접 점프 브레이크를 글마다 삽입하는 것보다는 편리하죠. 아래 링크를 참조하세요.
      구글 블로그(blogger) 본문 요약 및 이미지 썸네일 처리하기

      3. 자동으로 썸네일 이미지와 글의 일부를 메인 페이지에 나오도록 하는 템플릿을 다운 받아서 적용하기
      제가 사용하는 방법입니다. 블로거의 경우 검색해보면 엄청난 수의 템플릿을 찾을 수 있습니다. 그 템플릿들의 대부분은 제 템플릿처럼 메인 페이지에 썸네일 이미지와 글의 일부가 보여지도록 되어 있죠.
      구글에서 "blogger template" 으로 검색해보시면 좋은 템플릿을 많이 찾으실 수 있을 겁니다.

      삭제
  6. 좋은 정보 감사합니다
    글제목만 나오게는 성공을 했는데 이상하게 글목목이 하나만 나와
    expr:href='data:label.url' 부분을 검새해서 나오는 3부분을
    expr:href='data:label.url + "?max-results=150"' 로 수정했는데 나오지가
    그대로 글목록이 하나만 나옵니다ㅠ

    제가 잘못한건가요?

    답글삭제
    답글
    1. 김기철님의 블로그에 방문해 봤는데, 카테고리 목록의 라벨 링크에 "?max-results=1" 이 붙어있더군요. 그 부분을 수정하셔야 할 것 같습니다.

      삭제
    2. 정말 간단한 부분에서 제가 실수를 했었군요ㅎ 저는 템플릿에서 html부분만 수정하면 되는줄 알았는데알고보니 제가 설정한 카테고리에 이런 부분이 있었을줄이야ㅎ 정말 감사합니다 이렇게 한번에 해결될지는 꿈에도 몰랐네요^^ㅎ

      삭제
    3. 잘 해결되셨다니 다행입니다. ^^

      삭제
  7. 동적뷰 템플릿에서는 이 코드가 안 먹히나요?

    답글삭제
    답글
    1. 전 동적뷰 템플릿을 쓰지 않아서 잘 모르겠습니다. 도움이 되지 못해서 유감입니다.

      삭제
  8. 이방법을 홈에 적용할수있을까요? 메인페이지에요 답변부탁드릴게요

    답글삭제
    답글
    1. 모든 페이지에서 글제목만 나오게 하려면 아래 코드를 검색하셔서,
      <b:include data='post' name='post'/>
      아래 코드로 바꿔주시면 될 것 같습니다.
      <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>

      삭제
    2. 말씀해주신데로 입력했더니 전체가 바뀌긴했는데 세부내용에 이미지도 안보이네요

      삭제
    3. 이런 죄송합니다. 현재 제가 테스트해 볼 여건이 안되다보니 제대로 된 코드를 말씀드리지 못했네요. 본문에서 제시한 코드 대신에 아래 코드를 써보세요.

      <!--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:if cond='data:blog.pageType == &quot;index&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>
      </b:if>
      <!--Label and archive page title only hack End-->

      삭제
    4. 잘 처리됬습니다 감사합니다

      삭제
  9. 안녕하세요. 포스팅 참고해서 목록을 만들었습니다만 문제가 있어서 질문드립니다.
    max-result의 값이 1~5인 경우는 설정대로 1~5개의 글 목록이 나옵니다만
    6개가 넘어가도 한 날짜에 최대 5개밖에 표시가 안되서요
    혹시 짐작되는 소스 부분 있나요??

    답글삭제
    답글
    1. 위에도 비슷한 답변을 단 적이 있는데, max-result의 값이 템플릿에 따라서 적용되는 경우도 있고, 안되는 경우도 있는 듯 합니다. 우선 소스를 수정하시기 전에 브라우저에 라벨 주소에 max-result=10을 붙여보시고, 안되면 그 템플릿에는 적용되지 않는 것으로 보셔야 할 것 같습니다.

      삭제
  10. 나는 왜 2 개만 나올까요...

    답글삭제
    답글
    1. 프론트 페이지에 글을 2개만 나오도록 하셨나 보군요. data:label.url + "?max-results=150" 와 같이 max-results 값을 크게 잡아보시고 테스트 해보세요.

      다만 이 팁은 템플릿에 따라 적용되지 않을 수도 있습니다.

      삭제
  11. 감사합니다! 유용하게 적용했습니다.

    답글삭제
  12. 잘 적용했습니다 템플릿 자체의 날짜부분이 좀 걸리지만 수정방법을 모르니 내버려둬야겠어요

    답글삭제
    답글
    1. 날짜서식은 '설정 › 언어 및 서식 › 날짜 형식'에서 설정 가능합니다.

      삭제
    2. 포스트제목자체의 날짜가 나왔었는데
      .date-header{display:none;}추가해서 없앴어요
      또 들러서 다시 참고하고 갑니다 감사해요

      삭제
    3. 아. 글 말씀이셨군요. 잘 적용하셨다니 다행입니다. ^^

      삭제
  13. 단어를 찾을수 없다고 뜨네여ㅠㅠ

    답글삭제
  14. 궁금한게 하나 있어서 질문좀 드릴게요.
    페이지에 글 목록을 나열하는 방법이 궁금해서 질문 드립니다.
    제 블로그는 http://sin720.blogspot.kr/ 여기이고요.
    베끼고 싶은 블로그는 이분입니다. ->> http://myeasydiary.blogspot.kr/
    탭을 누르면 글들이 1.글제목~10.글제목 형식으로 나열이되는데요
    이거 어떻게하면 할수있는 감히 여쭙니다..
    방법좀 제발 알려주세요 ㅠㅠ.. 암만 찾아봐도 없네요..흑흑

    답글삭제
    답글
    1. 음... 그건 그 블로그에 질문하시는 게 좋을 것 같습니다.

      삭제
  15. 좋은 글 감사드립니다..
    그런데, 옆에 날짜를 안뜨게 하려면 어떻게 해야되요?

    답글삭제
    답글
    1. 우선 답변이 늦어 죄송합니다. 요즘 블로그 방치상태라서 확인이 늦었네요.

      날짜를 안 뜨게 하시려면 위의 코드 중에서 아래와 같은 코드를

      <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>

      다음 코드와 같이 바꿔주시면 됩니다.

      <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>

      삭제
    2. 감사합니다!
      덕분에 조금이라도 보기 편하게 바꿨네요.정말 감사합니다.
      근데 이런 코드는 어디서 배우나요? 저도 공부하면서 좀 배우고싶은데 어딜 손대야할지 감조차 안잡히네요;;

      근데 게시글 위에 작게 쓰여진 작성일도 지울수 있게 도와주실수 있나요? ㅎ;
      아직 덜 지워졌네요..

      삭제
    3. 전 그냥 구글링을 통해 정보를 얻었습니다. 다만 한국 사람들이 블로거를 잘 사용하지 않아서 모든 정보는 외국 사이트를 통해 얻었습니다.

      그리고 게시글 위에 쓰여진 작성일은 뭘 말씀하시는지 모르겠습니다. 블로그가 링크되어 있지도 않아서 확인을 할 수가 없네요.

      삭제
  16. 감사합니다ㅎㅎ
    뭐한가지 물어보고싶은데
    저렇게했더니 제목으로 표시는되는데 한페이지에 게시글이 하나만 나와요..
    게시한 날짜상관없이 모두 표시되면좋겟는데.. 어떻게하는지 ㅠㅠ

    답글삭제
    답글
    1. 위의 댓글에서 언급했듯이 max-results 값을 조절해 보세요.
      하지만 테마에 따라 제대로 적용이 안 되는 경우도 많습니다. 참고하세요.

      삭제
  17. 님이 말하시길 특정 템플릿에서만 적용된다고 하셨는데, 제가 대부분의 기본 제공 탬플릿을 이용해봐도 25개로 지정을 해봤는데도 한페이지에 1~4개로 들쭉날쭉하게만 나오네요...
    어떻게 해결방법 없을까요...?

    답글삭제
    답글
    1. 글쎄요. 그건 이 팁의 문제가 아닙니다. 이 팁은 스크립트같은 것을 이용하는 것이 아니고, 그냥 블로그 첫화면에 나오는 내용 중에서 제목만 남기는 팁이거든요.
      따라서 이 팁을 적용하든 안 하든 한 페이지에 나오는 글의 개수는 달라지지 않습니다.

      삭제
    2. 아마도 글 하나하나가 너무 길어져서, 한페이지에 짤려서 1~4개씩만 나오는걸꺼에요
      글쓸때 점프 브레이크 넣으세요
      그러면 한페이지에 글 25개 채울수 있을거에요

      삭제
  18. 4. 키보드의 「Ctrl+F」 키를 눌러서 아래의 코드를 검색한다.

    이 코드 자체가 아예 검색이 안되는데 어카죠? ㅠㅠ

    답글삭제
    답글
    1. 일반적인 테마를 사용한다면 검색이 될 겁니다. 혹시 동적뷰 템플릿을 쓰신다면 적용 안 될 가능성이 높습니다.

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

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

    답글삭제
  21. 적용시켜보니 요일에 따라서 다른 부류로 나오게 됩니다.
    http://kw32259981.blogspot.kr <--제 페이지 입니다.
    이것을 그 링크에 관련하여 하나의 목록으로 나오게하고 페이징 처리까지 될수 있을까요 ?
    그리고 요일 적용되는게 첫번째것만 적용이 되네요..

    답글삭제
  22. 적용시켜보니 요일에 따라서 다른 부류로 나오게 됩니다.
    http://kw32259981.blogspot.kr <--제 페이지 입니다.
    이것을 그 링크에 관련하여 하나의 목록으로 나오게하고 페이징 처리까지 될수 있을까요 ?
    그리고 요일 적용되는게 첫번째것만 적용이 되네요..

    답글삭제
  23. 안녕하세요 ~ 글 잘 봤습니다 .

    밑에 댓글도 보면서 하나씩 해결해 나갔습니다 .

    혹시 라벨 클릭시 목록에 제목만 말고 이미도 같이 나오게 할수 있나요 ?

    그리고 블로그 홈 에서는 최신글 순서고 역시 제목만 보이더군요
    홈에서 노출 순서나 노출시키고 싶은 게시물 선택가능할까요 ? 역시 이미지도 같이 나오게요 ~

    감사합니다 .

    답글삭제
  24. 좋은 정보 감사합니다.
    테그 하나 클릭하면 긴 글과 사진이 도배가 되어버려 보기 힘들던데..
    깔끔하니 보기 좋게 정리되었네요^^

    답글삭제