Monday, July 7, 2008

별 등급 보기 Star Ratings

지난 6월 26일에 Blogger in Draft는 많은 새롭고, 실험적인 기능을 선보였다. 진짜 비 오듯이 기능을 선보였다고 해야 할 것이다. 그중에 'New Feature: Embedded Comment Form'은 '블로거 인라인 코멘트 폼'으로 정리하여 글을 올렸다. 오늘은 'New Feature: Star Ratings'를 정리하고자 한다.


'New Feature: Star Ratings'는 말 그대로 글에 1-5개 별로 글의 등급을 매기는 것이라 할 수 있다. 이 기능을 사용하려면, http://draft.blogger.com/으로 로그인하여 '페이지 요소 추가 및 정렬' 페이지 상태에서 'Blog Posts 페이지요소'의 편집을 클릭한 다음, '블로그 게시물 구성'에서 '별 등급 보기'에 체크를 하고 설정을 저장하고 블로그 보기를 하면 된다.


하지만, 지난 번 블로거 인라인 코멘트 폼과 같이 '별 등급 보기' 위젯은 표준 템플릿에서는 정상적으로 나타나지만, 사용자가 수정한 템플릿에는 정상적으로 보이지 않는다. 이에 대한 해결책을 'How To Add Star Ratings to your Blogger Blog'에 잘 정리되어 있어서 여기에 정리한다.


블로그 글의 글쓴이와 레이블 사이에 '별 등급 보기 위젯'을 설치한다면, 대시보드 -> 레이아웃 -> HTML 편집 -> 전체 템플릿 다운로드를 클릭하여 템플릿을 백업한 다음에, 템플릿 수정 -> 도구 템플릿 확장을 클릭한다.


템플릿을 검색하여 다음을 코드를 찾는다.
<p class='post-footer-line post-footer-line-2'><span class='post-labels'>

찾은 코드 바로 위에 아래의 코드를 복사하여 붙인다.
<b:if cond='data:blog.pageType == "item"'>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>
</b:if>

다음에 다음 코드를 템플릿 검색을 통해서 찾는다.
<b:include name='nextprev'/>

찾은 코드 바로 아래에 다음 코드를 복사하여 붙인다.
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

템플릿을 저장하고 블로그보기를 한 다음에, 개별 글 페이지를 보면 아래 그림과 같이 '별 등급 보기'가 달려 있는 것을 확인할 수 있다.




위와 같이 템플릿을 수정하면 개별 글 페이지에서만 '별 등급 보기'를 볼 수 있는데, 블로그 페이지에서 글마다 별 등급을 보고자 하면 아래와 같이 위에 붙인 코드중에 다음 코드의 두 줄을 삭제하면 된다.
<b:if cond='data:blog.pageType == "item"'>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>
</b:if>

윗 글을 보면 알 수 있듯이, 위의 코드를 글쓴이 위에 또는 레이블 밑에도 붙일 수 있는데, 어는 위치에 코드를 갖다 붙이냐에 따라서 '별 등급 보기'의 위치가 달라진다는 것을 알 수 있다.


이 기능은 정식으로 퍼블리싱된 기능이 아니지만, 글의 별점을 주고 싶다면 사용하는데 전혀 이상이 없다. 또한, 위의 코드 및 방법은 How To Add Star Ratings to your Blogger Blog에 게시된 내용을 숙지하고 이용했다.

내가 아는 것이라는 것은 고작 복사와 붙이기의 신공(?)뿐 ㅡ.ㅡa;;;

2 comments:

  1. haloscan에도 보니까 그 기능 있던데..
    뭐 이제 둘이 통하보디서 둘 다 있는걸까요..?
    어쨌든 halo거 한 번 달아봤는데
    저만 매기고 있어서 ㄱ-;; 걍 뗐어요;;

    ReplyDelete
  2. [UltraMint] 저도 주렁주렁 다는 것을 좋아하지는 않지요. 다만, 글을 쓰고 예를 보여드러야 할 것 같아서 달았답니다. ^^

    ReplyDelete