Blogger CSS만 사용해서 방명록 만드는 방법 / 댓글 순서 반대로 정렬하기 How to Add a Guestbook / Reverse Comments

구글 블로그, 블로거(Blogger)에도 티스토리처럼 방명록 기능이 있었으면 좋겠어서 방법을 찾아봤는데요. 아무래도 다른 플러그인을 사용하면 사이트가 느려질 수 있기 때문에 최대한 블로거 기능 내에서 해결해보려고 했습니다.

보니까 티스토리는 댓글을 이용해서 방명록 기능이 구현된 것 같더라고요. 비슷한 방법으로 방명록을 만들어봤습니다.

CSS만 사용할 줄 알면 됩니다!

1. 블로거 메뉴에서 페이지로 들어가서 새 페이지를 추가합니다.

2. 제목을 'visitor'로 작성하고 옵션에서 댓글 '허용'을 선택한 뒤 게시합니다.

제목을 'visitor'로 하는 이유는 페이지의 퍼머링크가 제목을 기반으로 설정되기 때문입니다. 페이지는 일반 글과는 달리 퍼머링크를 따로 설정할 수 없기 때문에 제목에 영어를 입력해서 설정해야 합니다. 한 번 게시한 뒤에는 제목을 다른 걸로 바꾸셔도 상관없습니다.

3. '보기'를 눌러 해당 페이지의 주소가 'https://본인블로그도메인.blogspot.com/p/visitor.html'인지 확인합니다.

4. 블로거 메뉴에서 테마 - 맞춤설정 옆의 화살표 - HTML 편집으로 들어갑니다.

5. 댓글 순서를 변경하는 방법입니다.

</head>

위 코드를 찾아서 그 위에 아래 코드를 붙여넣습니다.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl path &quot;p/visitor.html&quot;'>
<style type='text/css'>
.comment-thread, .comment-thread ol {
    display: flex;
    flex-direction: column-reverse;
}
</style>
</b:if>

6. 목록 제목의 '댓글'을 '방명록'으로 바꾸는 방법입니다.

<data:messages.comments/>

위 코드를 찾아서 아래 코드로 변경합니다.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl path &quot;p/visitor.html&quot;'> 방명록
<b:else/>
<data:messages.comments/>
</b:if>

7. 다른 사람들도 방명록 페이지에 접근할 수 있게 링크를 공유해주면 됩니다.

가장 쉬운 방법은 레이아웃에 가서 링크 목록이나 페이지 목록에 추가해주는 거예요.

5번의 CSS 코드 삽입 전후를 비교해보면 다음과 같습니다.

댓글 입력 칸이 맨 위로 옮겨지고, 댓글 순서가 반대로 정렬되었습니다. 답글은 원래 순서대로 정렬되어 있고요.

방명록뿐만 아니라 모든 게시물에서 반대로 정렬하고 싶으시다면 5번 코드에서 <b:if>를 제외한 style 부분만 코드에 추가하시면 됩니다.

만약 댓글 순서는 그대로 두고, 댓글 입력 칸만 맨 위로 옮기고 싶다면 5번 코드에서 ', .comment-thread ol'를 지우시면 됩니다. 앞의 콤마(,)까지 지우셔야 해요!