Saturday, February 11, 2006
Archive 페이지 첫부분에, 지난 포스트들의 일목요연한 목록 추가
몇년 전 블로그라는 것이 처음 소개되었을 때, 블로그들을 한 번 구경해 보고는 흥미를 잃었었다. 일반 웹페이지와 달리, 블로그에서는 게시물의 전체 목록이 보이지 않았다. 그래서 어떻게 네비게이션을 해야 하는지 당혹스러웠다. Archive라는 곳이 있어서 보니 수많은 게시물들이 하나로 장황하게 연결되어 있어, 스크롤이 힘들었다. 지금 생각해 보니 그것은, 최신 게시물을 중요시하는 블로그의 특성 때문일 것이다.
작년말, "blogger.com + blogspot.com"에 블로그를 개설했는데, 필자의 이 블로그 역시 완전한 '목록 표시 기능'이 없었다. 그래서 내가 무슨 포스트들을 올렸는지 자신조차도 잘 파악되지 않는 구조를 가지고 있었다. 포스트의 목록이 필요했다.
blogger.com의 템플릿으로 만들어진 Archive 페이지에는 원래 목록이 없다. 1달 동안의 모든 포스트가 하나로 연결되어 있고, 메인 페이지와 잘 구분도 되지 않아 무척 혼란스러웠다.
전체 목록을 표시하는 방법은 없는 듯했지만, 월별 Archive 페이지에 1달 동안의 포스트 목록을 표시하는 방법은, "Blogger 도움말: 어떻게 아카이브를 제목별로 표시할 수 있습니까?"(# 2024-04-01: 현재 삭제됨)라는 Blogger 도움말에 있었다. 이런 것은 기본 템플릿에 포함되어 있으면 좋을 것이다.
목록을 추가하니 네이게이션이 훨씬 쉬워졌다.
도움말에 있는 코드는, "블로그 제목"과 "블로그 설명문" 태그 밑에 넣어주어야 한다. 필자가 현재 사용중인 "Son of Moto" 템플릿의 경우는,
<div id="main"> 바로 밑이 적합한 위치다.
결과는 이렇게 나타났고 꽤 만족스러웠다.
도움말에 있는 코드는 최소한의 기본적인 것이라, 스타일을 좀 추가하니 아래와 같이 복잡해졌다:
<ArchivePage>
<p style="font-family:'Arial Black'; font-size:24pt; text-align:center; margin-top:15px;" class="wasabi-fc-orange">Monthly Archive</p>
<p style="text-align:right; margin-bottom:20px;"><a href="<$BlogURL$>" style="font-size:16pt;"><< Home</a></p>
<Blogger>
<BlogItemTitle>
<div style="font-family:'Arial'; font-size:10pt; font-weight:bold;" class="wasabi-fc-gray-cool"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div style="margin-bottom:3px;"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></div>
</BlogItemTitle>
</Blogger>
<p style="margin-bottom:50px;"></p>
</ArchivePage>
그리고 또한 아래는 템플릿의, <style type="text/css"> 와 </style> 사이에 끼워 넣어주어야 할 클래스들
.wasabi-fc-gray-cool { color:#B4BFC4 }
.wasabi-fc-orange { color:#FFCC33 }
작년말, "blogger.com + blogspot.com"에 블로그를 개설했는데, 필자의 이 블로그 역시 완전한 '목록 표시 기능'이 없었다. 그래서 내가 무슨 포스트들을 올렸는지 자신조차도 잘 파악되지 않는 구조를 가지고 있었다. 포스트의 목록이 필요했다.
blogger.com의 템플릿으로 만들어진 Archive 페이지에는 원래 목록이 없다. 1달 동안의 모든 포스트가 하나로 연결되어 있고, 메인 페이지와 잘 구분도 되지 않아 무척 혼란스러웠다.
전체 목록을 표시하는 방법은 없는 듯했지만, 월별 Archive 페이지에 1달 동안의 포스트 목록을 표시하는 방법은, "Blogger 도움말: 어떻게 아카이브를 제목별로 표시할 수 있습니까?"(# 2024-04-01: 현재 삭제됨)라는 Blogger 도움말에 있었다. 이런 것은 기본 템플릿에 포함되어 있으면 좋을 것이다.
목록을 추가하니 네이게이션이 훨씬 쉬워졌다.
도움말에 있는 코드는, "블로그 제목"과 "블로그 설명문" 태그 밑에 넣어주어야 한다. 필자가 현재 사용중인 "Son of Moto" 템플릿의 경우는,
<div id="main"> 바로 밑이 적합한 위치다.
결과는 이렇게 나타났고 꽤 만족스러웠다.
도움말에 있는 코드는 최소한의 기본적인 것이라, 스타일을 좀 추가하니 아래와 같이 복잡해졌다:
<ArchivePage>
<p style="font-family:'Arial Black'; font-size:24pt; text-align:center; margin-top:15px;" class="wasabi-fc-orange">Monthly Archive</p>
<p style="text-align:right; margin-bottom:20px;"><a href="<$BlogURL$>" style="font-size:16pt;"><< Home</a></p>
<Blogger>
<BlogItemTitle>
<div style="font-family:'Arial'; font-size:10pt; font-weight:bold;" class="wasabi-fc-gray-cool"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div style="margin-bottom:3px;"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></div>
</BlogItemTitle>
</Blogger>
<p style="margin-bottom:50px;"></p>
</ArchivePage>
그리고 또한 아래는 템플릿의, <style type="text/css"> 와 </style> 사이에 끼워 넣어주어야 할 클래스들
.wasabi-fc-gray-cool { color:#B4BFC4 }
.wasabi-fc-orange { color:#FFCC33 }
tag: blogger
블로거 | 구글블로그 | Blogger.com + blogspot.com
<< Home