Blogger에 올블릿(Allblet) 달기

by H.F. Kais | 2006. 4. 12. | 4 comments

링크 : 하늘이님의 올블릿 설명글

전에도 이야기했듯이, Blogger에는 트랙백 기능이 없다. 같은 Blogger 내의 블로그 끼리는 links to this post 기능으로 연결이 될 수 있지만(그것도 실시간으로 되진 않는다) 워드프레스나 이글루스, 네이버 블로그 등 다른 외부 블로그와는 트랙백을 주고받을 수 없다. 겨우겨우 링크나 달면 그나마 다행이다. 하지만 아무래도 트랙백 기능이 없다는 것은 블로그에 있어 치명적인 단점이 될 수 있다. 때문에 Haloscan 같은 외부 서비스를 이용해 트랙백 기능을 별도로 달아야 한다. 개인적으로 하루빨리 Blogger에도 트랙백 기능이 추가되었으면 하는 바람이다.

그러나 올블로그에서 제공하는 올블릿(Allblet)기능을 이용하면, 비록 직접적인 트랙백은 아니더라도 관련된 글을 표시해준다는 점에서 비슷한 기능을 구현해놓을 수 있다. 물론 글의 직접적인 트랙백 주소가 아니라 태그를 이용해 글들을 엮어준다는 점에서 트랙백과는 구분되지만, Blogger에서 그것만 해도 어딘가. :)

Blogger의 템플릿 코드에 들어갈 스크립트를 하늘이님의 글에서 찾을 수 있었다. 글에서는 워드프레스가 예제로 나와있었지만, Blogger에서 쓰이는 템플릿 태그와 조합해서 코드를 만들 수 있었다.

<script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?<$BlogItemPermalinkUrl$>" type="text/javascript"></script>

보시다시피, 매우 간단하다. 요점은 <$BlogItemPermalinkUrl$> 요 부분. 각 포스트의 영구링크를 출력해주는 Blogger 템플릿 태그다. 이는 Blogger의 도움말 페이지에 자세하게 설명되어 있는데, 이러한 태그들을 조합해 블로그의 내용들을 표시해준다.

여기에 파스크란님의 블로그에 쓰인 태그를 참조해 올블릿 내용이 클릭에 의해 보였다 안보였다 하게 만들어두었다. 이 태그는 div를 이용해 클릭에 의해 각 div가 보이게 또는 안보이게 하는 것인데, 중간에 살짝 버그가 발생했다. 소스를 보면 알겠지만, 각 div는 각각의 id를 갖게 된다. 이걸 모르고 그냥 대충 넣어버렸더니, 블로그 인덱스 페이지(여러 포스트가 모두 표시됨) 에서 엉뚱한 div 레이어가 나왔다 사라졌다 하는 현상이 발생했다. 한마디로 꼬여버린 것이다. 물론 각 포스트의 영구주소로 들어간 페이지에서는 문제가 없었지만, 인덱스에서는 문제가 되었다. div의 id에 각각 다른 숫자를 넣어주면 되는데, 나는 여기에 Blogger에서 제공하는 각 포스트의 고유 id번호표시 태그를 사용했다. 바로 <$BlogItemNumber$> 태그가 그것이다. 이를 이용해 각각의 div에 서로 다른 숫자를 넣어주었고, 훌륭하게 작동했다.

지금은 Blogger 인덱스 페이지에서 올블릿 관련글을 보이지 않게 설정하고, 각 포스트의 영구주소 페이지에서만 보이게 해놨다. 이도 물론 Blogger의 태그 중 조건부 태그를 이용해 설정했다. 코드나 방식이 매우 간단하므로, Blogger 이용자는 쉽게 템플릿 수정에서 이 태그를 넣어 자신의 블로그에 올블릿을 설치할 수 있다. 내가 쓴 태그는 다음과 같다. 여기에 약간의 CSS수정만 해주면 Blogger에서 사용할 수 있다.

<!-- 올블릿 --> <div id="allblet"> <div id="allblet_more<$BlogItemNumber$>" style="display: block;"><a href="#" onclick=""hideLayer('allblet_more<$BlogItemNumber$>');showLayer('allblet_less<$BlogItemNumber$>');;return false"> [+] Allblet 관련글 표시 </a></div> <div id="allblet_less<$BlogItemNumber$>" style="display: none;"><a href="#" onclick="showLayer('allblet_more<$BlogItemNumber$>');hideLayer('allblet_less<$BlogItemNumber$>');return false"> [-] Allblet 관련글 닫기 </a> <br><script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?<$BlogItemPermalinkUrl$>" type="text/javascript"></script></div>lt;/div> </div> <!-- 올블릿 -->
태그 : , , ,

댓글 4개:

  1. 오! 개인적으로는 이 쪽이 훨씬 깔끔해 보이고 좋네요.

    답글삭제
  2. 어이쿠, 코드들이 죄다 div박스 밖으로 삐져나오네요. 이걸 워짜노...어흑

    답글삭제
  3. 와우. 올블릿이 블로거에도 달 수 있군요. 그리 오래 사용하지는 않았지만 확실히 블로거는 트랙백 기능이 없는거와 previous post에서 지금 읽고 있는 글 이후에 포스트만 나온다는게 제일 아쉬웠던거 같아요. 이게 은근히 불편하더군요. 익숙해진다면 모르겠지만요.

    아무튼 올블릿이 이 k2스킨과 잘 어울립니다. ^^

    답글삭제
  4. 후후후. 전 오늘 낮에 HALOSCAN 붙여버렸답니다. 요즘 남들 다 하는 거 이것저것 붙여넣느라 팔자에도 없는 HTML 태그 하나 둘 익히고 있지요. 뭐, 싸이와는 또 다른 재미가 있지만요.

    답글삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.