구글 블로그 사용기 - Read More는 어떻게?

이젠 나만의 공간에서 내가 관심있어 하는 글을 올릴 준비가 다 되었다. 처음엔 일기나 간단한 노트에서 부터 유용한 정보에 이르기까지 인터넷상에 또다른 Garbage가 되지 않도록 노력하면서 글을 올려보자.

그런데 글을 올리다보니 메인페이지에 여러개의 글이 장문 그대로 다 올라가 보기에도 너무 좋지 않고, 뭔가 아마추어같은 느낌이 팍 온다. 다른 블로그에는 여러개의 글이 메인페이지에 "Read More"라고 하여 간략하게 보이는데, 왜 내 블로그만 그런가 고민이 된다.

여기에도 방법은 있다. 다음과 같이 해보자.

준비 1] "Read More" 를 하기위해서는 먼저 Settings Archiving Enable Post Pages가 "Yes"로 되어 있어야 하니 혹 "No"로 되어 있다면 "Yes"로 변경하자.

준비 2] Layout | Edit HTML | Download Full Template 에서 현재 템플릿의 XML을 안전하게 내 컴퓨터에 저장부터 하여 backup을 만든다. 만에 하나 있을 사고를 예방하기 위함이다.

이제 준비는 다 했다. 그럼 실질적인 수정을 아래 3 step 에 따라 따라 해 보자.

1. fullpost를 정의한다.
Layout | Edit HTML | Edit Template 내에서 "</head>" 를 찾고 "</head>" 바로 위에 아래 코드를 넣고 "save template"를 클릭하여 저장한다.

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>
</head>

2. Read more 링크 달기
Layout | Edit HTML | Edit Template 에서 "Expand Widget Templates" 체크박스를 체크한다. 그래야 아래 찾고자 하는 코드가 나온다. 체크박스를 체크하였다면 "<div class='post-body'" 를 찾아보자. 찾았다면 아래와 같이 빨간색 부분을 넣고 저장한다.

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/>

3. Post Template 수정하기
Settings | Formatting | Post Template 내에 아래와 같이 넣고 "Save Settings"을 클릭하여 저장한다.

<span id="fullpost"">

</span>

자 이제 모든 준비는 다되었다. 제대로 기능을 하는지 아래와 같이 해보자.
1. Posting | Create 에서 테스트 게시물을 올리면 아래와 같이 나오고 작성한 게시물을 한번 올려보자. 즉, 아래 span 사이에 적혀 있는 것들은 read more를 클릭해야 볼수 있게 된다.