구글 Blogger의 메인화면에 나타나는 글 목록을 간략하게 꾸며보자

by H.F. Kais | 2009. 8. 11. | 22 comments

중요 : Windows Live Writer와 관련해 계정추가시 문제가 발생할 수 있습니다. 자세한 내용은 글 맨 아래를 참고하세요.

구글 Blogger에는 티스토리의 태터데스크같은 메인화면이 따로 없습니다. 미리 지정한 수 만큼의 최신 글을 순서대로 보여줄 뿐입니다. 제목만 보여주는 것도 아니고 각 글의 본문 내용까지 모두 보여줍니다. 이는 아카이브 페이지와 레이블 검색 페이지에도 그대로 적용되죠. 전체적으로 훑어보기엔 좋지만, 페이지가 너무 길어져 버린다는 단점이 있습니다. 또한 각 글의 제목만 따로 뽑아주는 것도 아니어서 제목별로 글을 찾고자 할 때 불편하죠.

그래서 오늘은 Blogger의 메인 화면을 좀 손보려고 합니다. 이미 제 블로그 메인화면에 적용되어 있죠. 저처럼 블로그에 올리는 글의 길이가 긴 편인 분들께 유용하리라 생각됩니다.

 

페이지 타입을 이용해 페이지마다 각각 다른 내용 출력하기

Blogger에는 세 개의 페이지 타입이 있습니다. 메인페이지(main), 아카이브(archive), 게시물(item) 이 바로 그것이죠. 간단한 코드를 이용해 페이지마다 각각 다른 레이아웃이나 디자인, 표시 내용을 지정할 수 있습니다. 대시보드의 ‘레이아웃’-‘HTML편집’ 메뉴에서 수정할 수 있죠(‘도구 템플릿 확장’에 체크는 필수!). 기본 형식은 다음과 같습니다.

<b:if cond='data:blog.pageType == "item"'>
<아이템 페이지에만 표시할 내용>
</b:if>

해석하자면 이렇습니다. “만약 지금 보이는 페이지의 타입이 “item(게시물)” 이라면, 이 안에 속한 내용을 표시하라”. 즉, 각 글의 게시물 페이지에만 내용이 표시됩니다. 메인페이지나 아카이브 페이지에는 나타나지 않죠. 제 블로그에서는 믹시의 ‘믹스업 위젯’을 표시할 때 이 태그를 쓰고 있습니다. 덕분에 게시물 페이지에서만 믹스업 위젯이 나타나죠.

IF가 나왔으니, Else도 있겠죠? 당연히 있습니다. Else가 들어갔을 경우의 코드는 다음과 같습니다.

<b:if cond='data:blog.pageType == "item"'>
<아이템 페이지에만 표시할 내용>
<b:else/>
<아이템 페이지가 아닐 경우 표시할 내용>
</b:if>

코드 위쪽 부분의 해석은 위와 같습니다. 여기에 else 부분을 덧붙여, “만약 지금 보이는 페이지의 타입이 “item”이 아니라면, 아래 내용을 표시하라”. 부분이 추가되었죠. 여기선 두 번째 코드, 즉 else 부분이 포함된 코드를 사용할 겁니다. 방법은 간단합니다. 게시물 페이지일 때의 내용과, 메인 또는 아카이브일 때의 내용을 각각 다르게 지정해주면 되죠.

<b:if cond='data:blog.pageType == “item”'>
<data:post.body/>

<b:else/>
<div class='post_list'>
<data:post.body/>
<div class='post_list_info'> 게시물 내용의 일부입니다.<br/>
<a expr:href='data:post.url'><strong>전체 내용을 보려면 클릭해주세요.</strong></a>
</div>
</div>
</b:if>

<data:post.body/> 태그는 Blogger의 템플릿 코드로서, 글의 본문을 표시해주는 역할을 합니다. 코드를 해석해 볼까요? 게시물 페이지일 때는 본문만 보이게, 게시물 페이지가 아닐 때에는 post_list 라는 이름의 div 안에 본문이 표시되도록 되어 있습니다. 그리고 약간의 설명도 표시되도록 해놨죠. 글 전체를 볼 수 있게 퍼머링크도 달았습니다. 글 제목이나 날짜 등은 그대로 쓸 것이므로, 여기엔 넣지 않았습니다.

Blogger의 HTML편집 메뉴에서 <data:post.body/> 태그가 위치한 곳을 찾아, 위와 같이 변경해 줍니다. 그럼 이제, CSS를 수정해 볼까요?

 

CSS를 이용해 글 내용의 일부만 표시하기

위에서 b:else 코드를 작성했을 때 본문 내용을 표시해주는 <data:post.body/> 태그를 div 로 감쌌습니다. 여기에 CSS스타일을 적용시켜, 길고 긴 본문 내용 중 일부만 표시되도록 할 것입니다. Blogger의 HTML편집에서 보면, head 태그 사이에 CSS 스타일시트가 적용되어 있습니다. 아까 div 태그의 클래스명을 post_list 로 지정했었죠? 이걸 그대로 사용합니다(꼭 여기에 지정된 클래스명을 쓰지 않아도 됩니다. 다만 클래스명을 바꿀 땐 HTML에 쓰인 클래스명 전체를 다 바꿔주세요).

.post_list { width: 560px; height: 300px; overflow: hidden; }

본문을 요약해서 보여줄 크기를 지정해주고 overflow: hidden; 를 입력합니다. div 안의 내용이 지정된 크기보다 커서 넘칠 경우, 넘친 부분은 보이지 않게 하라는 뜻입니다. 이렇게 해두면 글의 길이가 엄청 길어도 위에서부터 가로560 x 세로300px 까지만 표시해 줍니다. 아까 IF문에서 게시물(item)일 때는 이 div 코드를 넣지 않았으므로, 게시물 페이지에서는 본문의 전체 내용이 표시되죠.

그런데 이 방법에는 커다란 단점이 있습니다. 바로 Blogger 시스템 내에서 본문의 일부만 보여주는 것이 아니라, 본문 전체를 로딩한 뒤에 CSS를 이용, 나머지 부분을 잘라낸다는 점이죠. 때문에 몇몇 오브젝트들의 경우 이 방법이 잘 안 먹힐 때가 있습니다. 특히 embed 태그로 삽입된 오브젝트의 경우, 미리 설정된 div 크기보다 바깥쪽에 있으면서도 표시될 때가 있죠. 그래서 전 아예 embed 태그가 보이지 않도록 설정했습니다.

.post_list embed { display: none; }

post_list 클래스명을 쓰는 개체 안에 속한 embed 태그를 보이지 않게 하라는 뜻입니다. 아까 div 에 저 클래스명을 지정했으므로, 그 안에 있는 모든 embed 태그는 보이지 않게 됩니다. 만약 이미지까지 보이지 않게 하려면, img 태그도 추가하면 됩니다.

.post_list embed, .post_list img { display: none; }

이렇게 해 두면 post_list 클래스명을 쓰는 개체 안에 속한 모든 embed, img 태그가 보이지 않게 됩니다. 띄어쓰기에 주의하세요.

템플릿을 저장하고 확인하기, 테두리 넣기

이제 템플릿을 저장하고 제대로 적용되었는지 확인합니다. 템플릿 코드에 오류가 있다면 Blogger의 HTML편집기에서 받아주질 않습니다. 그리고 post_list 박스의 크기를 픽셀로 지정하였으므로, 본문 텍스트가 중간에서 뚝 잘릴 수도 있습니다. 갑자기 텍스트 중간에서 뚝 잘려 보기 안 좋다면, 박스 하단에 선을 넣는 것도 좋은 방법입니다.

.post_list { width: 560px; height: 300px; overflow: hidden; border-bottom: solid 1px #ccc; }

post_list 박스의 하단에 직선으로 된, 두께 1px, #ccc색의 테두리를 넣으라는 뜻입니다. 점선으로 하고 싶으시다면 solid 를 dashed 나 dotted 로 바꿔주면 됩니다.

저도 처음엔 선을 넣었다가 좀 밋밋한 것 같아서 그림자와 투명PNG로 마무리 했습니다. CSS를 이용했지요. 글이 너무 길어지니 이건 다음에 알려드릴게요(말로 설명하는 건 너무 어려워요).

Blogger 메인페이지 꾸미기

이렇게 해서 블로그의 메인페이지와 아카이브 페이지를 꾸며봤습니다. 전엔 아카이브 페이지를 한 번 볼라치면 너무 길어져서 보기 힘들었는데, 지금은 적당히 짧아져서 보기 괜찮네요.

Blogger를 쓰고 계시다면, 한 번 이렇게 꾸며보는 건 어떨까요?

 

중요 : Windows Live Writer에서 Blogger를 새 계정으로 추가할 때, 이 팁 때문에 블로그의 스킨을 제대로 불러오지 못할 수도 있습니다. 그럴 땐 이 팁에서 수정한 부분을 원래대로 돌려놓은 뒤(또는 주석처리를 이용) Live Writer에서 계정추가를 하고, 다시 팁을 적용하면 됩니다. 향후 스킨 업데이트 시에도 그대로 적용됩니다. Live Writer에서 해당 코드를 제대로 인식하지 못해 이런 문제가 발생합니다.(2009-08-16)

댓글 22개:

  1. 우오...멋진데요....
    마치 워드프레스 같아요!

    답글삭제
  2. Blogger에 data:post.body =='content:120자'/ 이런 거라도 있으면 좋겠는데ㅠ 무언가 가난한(?) Blogger 템플릿에선 이렇게 꼼수라도 써야 해요 ㅠ

    답글삭제
  3. div태그 하나 안닫아 주신것 같군요.

    답글삭제
  4. majumawm 님/
    어디 말씀이신지요?

    답글삭제
  5. 찾아서 수정했습니다. 감사합니다. :)

    답글삭제
  6. 블로거가 유투브와 연계돼어있어 스크랩할때 편하긴 한데요.카테고리를 맘대로 이름짓고 바꿀수 없는것 같아요.방법이 있으면 좀 알려주시면 감사하겠습니다.

    답글삭제
  7. 익명 님 / 블로거에는 카테고리라는 기능 자체가 없어요. 글을 구분짓는건 라벨(태그) 뿐이죠. digg라던가 뭐 다른 외부적인 방법을 통해 카테고리처럼 쓰는 방법도 있지만, 기본적으로 블로거 자체에는 카테고리가 없어요.

    답글삭제
  8. cgkoh / 별말씀을... 감사합니다.

    답글삭제
  9. glglgl 님 / 얼마전 Blogger에서 read more라는 기능을 추가했기 때문에, 위 팁은 사실상 필요가 없게 되었답니다. 제 블로그에 read more 기능에 대한 글이 있으니 그걸 봐주세요~

    답글삭제
  10. 저에겐 너무 복잡하고 어렵워요.

    답글삭제
  11. 전 메뉴목록을 추가하는 기능을 하고싶은데..ㅡ_ㅜ
    아무리 해도 모르겠네요
    날짜별로 보여지고 밑에 예를 들어
    art(3) film(6) photo(9)... 이런식으로 분류해서
    보이고 싶은데..이방법은 어찌해야할까요...

    답글삭제
  12. 아나구 님 / HTML과 CSS에 대해 조금 아셔야 이해하실 수 있을 겁니다. 물론 모른다고 해도 Blogger를 이용하는데 전혀 문제 없답니다~

    alo-ha* 님 / 헤더 부분에 메뉴를 추가해서 링크를 걸고, 고정 페이지에 연결하는 것이라면 그런 기능이 있는데... 날짜별로 나누고 그걸 다시 카테고리(또는 태그)식으로 나누는 건 연구가 좀 필요할 것 같네요. 다른 blogger 사이트들을 많이 찾아보시는게 도움이 될 것 같습니다.

    답글삭제
  13. 질문입니다.제가 블러그 템플릿을 어느사이트에받아 사용합니다 그런데 사용하다보니 이런 기본에 기본블로그템플릿에는 님의 글맨위 오른쪽에있는아이콘처럼 m,b,t,f,g+1 이라는 아이콘이 저에겐없습니다.(제블로그입니다http://hoitallica.blogspot.com/)제불로그에 보시면압니다 날라갔죠 저아이콘들이말이죠.
    그거어찌하면 다시넣을수가있는지요.다른것은 그렇다치고 g+1버튼좀 넣을수없는지요...알아본결과 버튼 생성기 같은 태그를 넣으면 된다는데 거기서 해보아도 도무지 생기지않습니다.
    님처럼 저아아이콘들이 글을 새로 쓸때마다 본문 상단에 계속넣을려면 어찌해야하는지요.
    죄송하지만 님의 태그를 복사해서 어디다가넣어라 라고하시면 넣겠는데요.ㅠㅠㅠㅠ

    답글삭제
  14. 또하나의질문은 지금 님의글 아래에보면 다음뷰에드온?? 같은것이 멋지게있는데요.그거 어찌 넣는지요.다음에 가니 무슨 도구같은것들이있는데 문제는 그것은 그냥 블로그 사이드바에 넣는것같고 님처럼 본문 안에다가 늘 보이게 넣을려면 어찌해야하는지요.
    또한 다음뷰에 가서보니 님처럼 모양이생기지 않는거같은데요.어찌해야하는지 알려주시면 대단히 고맙겠습니다.좋은하루되십시요

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

      삭제
  15. gis man 님 / 우선 간단한 다음뷰 위젯 부터 설명드릴께요. http://v.daum.net/ 여기서 가입하시고(다음 가입 후 또 가입) 블로그를 등록하신 뒤, 글을 쓸 때마다 다음뷰로 글을 송고하셔야 합니다. 송고된 글은 다음뷰에서 볼 수 있는데 http://v.daum.net/link/3899783 이런 식의 링크와 위에 다음뷰 바가 붙게 되죠. 여기서 '퍼가기' 버튼을 누른 뒤 나오는 소스코드를, blogger에서 글 쓰실 때 html로 넣으시면 됩니다. 즉 '포스팅 - 다음뷰에 송고 - 위젯코드 복사 - 포스팅된 게시물 수정을 통해 코드 삽입' 하면 제 블로그처럼 다음뷰 위젯이 화면에 보이게 됩니다. 다음블로그나 티스토리를 쓰면 자동으로 송고와 위젯코드 삽입을 할 수 있다는데, 그 외의 블로그들은 저렇게 일일이 코드를 넣어주어야 합니다.

    답글삭제
    답글
    1. 속이 다후련하군요.저는 자동으로 되는줄알았습니다.지금 님의말씀을듣고 일일이 넣으니 되는군요.ㅠㅠㅠ자동으로 되면 좋은데...

      삭제
  16. gis man 님 / 그리고 첫번째 질문, blogger의 관리화면에서 '템플릿 - html편집' 에 들어가신 뒤 '가젯코드 펼쳐서 보여주기'에 체크하세요. 안에 코드를 넣어야 하는데, 해외 사이트에 잘 설명되어 있습니다. http://www.bloggerplugins.org/2010/06/official-sharing-buttons-on-blogger.html 나 http://www.bloggertricks.com/2010/07/how-to-add-blogger-share-buttons-to.html 같은 포스팅을 참고하시면 될 것 같네요.

    답글삭제
    답글
    1. 님덕분에 겨우 해결햇습니다.이러한 정보는 정말 귀한정보죠.물론 다른정보도 훌륭하지만 사실은 이런 정보는 찾기가쉽지않거든요.제가이거 찾는데 3일걸렸는데(전html아무것도모르거든요) 이렇게 님을 알게되어 댓글을 남겼는데 이렇게 링크도걸어주시고 번역하면서 겨우 해결했습니다.정말 감사드립니다.

      다시한번
      정말 친절한 답변 대단히고맙습니다.

      삭제
    2. 물론 blogger에서 제공하는 공식 템플릿에선 기능들이 자동으로 제공됩니다. 다만 다른 곳에서 받아온 템플릿들의 경우, 종종 관련 태그가 빠져있어 일일이 넣어주어야 할 때가 있습니다. 그런 경우 구글을 통해 해외쪽 사이트를 찾아보시면 정말 쉽게 설명된 곳이 많습니다. 저야 그런 곳들을 그냥 찾아봤을 뿐입니다. 잘 해결하셨다니 다행입니다. 도움이 되어 저도 기쁩니다.

      삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.