Blogger에 올블릿(Allblet) 달기

이 글은, 누추한 제 블로그를 방문해주시고 메일까지 보내주신 지저깨비님께 드립니다. ;-)

-----

올블로그에 올블릿 서비스 공지가 뜬 것을 보고 '연관글' 기능이 제법 괜찮겠다 싶어서 제 블로그에도 달아보기로 마음을 먹었습니다. (제 변덕으로 올블릿을 떼어 버리지 않았다면 지금 보고 계시는 이 글 아랫 부분에 달려 있는 올블릿을 보실 수 있습니다.)

올블릿 공식 홈페이지에서 아주 상세하게 잘 설명을 해주고 있기 때문에 올블릿 장착을 위한 스크립트는 큰 어려움 없이 취향에 맞게 생성할 수 있습니다. 태터툴즈와 워드프레스의 경우 플러그인 방식도 지원되기 때문에 설치가 더욱 쉽지만, 한국 내에서 아직까지 비주류에 속하는 Blogger 사용자는 약간의 노력이 더 필요합니다.

기본적으로 Blogger에 리플바 달기에서 소개되었던 방법과 크게 차이가 없습니다.

1. 올블릿 공식 홈페이지에서 자신의 취향에 맞는 올블릿 스크립트를 생성합니다. 이 부분은 올블릿 홈페이지에서 친절하게 잘 설명해주고 있기 때문에 여기서는 생략합니다. :)

2. Blogger에 로그인 한 후 템플릿 -> HTML 편집 페이지로 이동합니다. 그리고, [그림 1]에서 보이는 것과 같이 '도구 템플릿 확장' 항목에 체크를 합니다.

[그림 1] Blogger 템플릿 HTML 편집 페이지

3. 템플릿 코드 내용 중 <div class='post-footer'> 부분을 찾아서 그 바로 아래에 올블릿 스크립트를 붙여넣기 합니다. 이 때 [그림 2]에서 보이는 것처럼 올블릿 스크립트 시작과 끝 부분을 <p class='post-footer-line post-footer-line-1'> 와 </p>태그로 감싸줍니다.

[그림 2] Blogger 템플릿에 올블릿 스크립트 코드 추가하기

중요. 만약 올블릿 스크립트를 생성할 때 [그림 3]과 같이 '태그 직접 입력' 방식을 선택했다면 스크립트의 allbletTags 변수 내용을 다음과 같이 채워 넣어야 합니다. (제 경우 '리퍼러 이용' 방식이나 '고유주소 직접 입력' 방식을 적용하기 어려운 상황이어서 이 방식을 사용했습니다.)

... 생략 ...
var allbletDefaultTab='relevant';
var allbletLink='';
var allbletTags=&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>&#39;;
var allbletTabOptions=new Object();
allbletTabOptions.relevant = '5|1|';
... 생략 ...

[그림 3] 올블릿 '태그 직접 입력' 방식

4. 이제 템플릿 코드를 저장합니다. 오류가 발생하지 않았다면 원하는 모양 대로 잘 보이는지 확인해봅니다.

이렇게 좋은 서비스들이 나올 때마다 제 블로그에 조심스레 적용해보면서 항상 느끼는 것이지만, 국내에서 개발되는 많은 블로그 관련 서비스들이 Blogger도 잘 지원해주었으면 하는 바람입니다. :)