구글 블로그에 태그 구름을 달아보자.

요약: 이 글은 새 구글 블로그(New Blogger)에 추가된 기능인 레이블을 태그 구름처럼 보이도록 수정하는 방법에 관한 글이다.

구글 블로그라고들 불리는 Blogger는 설치형 블로그만큼 자유도가 높지는 않겠지만 다양한 인터페이스와 위젯, 템플릿 등을 활용할 수 있는 장점이 있다. 새 Blogger Blogger 베타 에서 새로 생긴 레이블을 보기 좋게 정리하는 팁을 소개한다.

설치형 블로그를 쓰는 분들이 사용하는 태그 구름을 새 Blogger Blogger 베타 에 달 수 없을까 하는 생각이 들어 검색을 해 보았다. phydeaux3라는 분이 "Code for Beta Blogger Lael Cloud"라는 포스트에서 소개하고 있다. 우리가 흔히 쓰는 태그라는 용어는 새 Blogger Blogger 베타 에서는 레이블에 가까운 만큼 레이블 구름을 사용하면 비슷한 인터페이스를 제공할 수 있다.

위 포스트에서 링크하고 있는 페이지를 따라가 보면 적용 방법과 실제 코드가 잘 설명되어 있다. 영어를 진지하게 읽기 싫은 분들을 위해 간단한 스텝만 소개해 본다.

1. 템플릿 -> HTML 편집 메뉴를 클릭한다.
아래의 작업들을 하기 전에 미리 전체 템플릿을 다운로드 받아 두도록 하자.

2. Style을 정의하고 있는 부분을 붙여 넣는다.
코드를 설명하고 있는 페이지에서 첫 번째 코드 부분(/* Label Cloud Styles 로 시작되는 코드)을 카피한 후 블로그의 HTML 코드에 붙여 넣는다. 주의할 점은 반드시 아래의 태그 앞에 붙여 넣어야 한다는 것.
]]></b:skin>

3. Label cloud 관련 변수 정의 부분을 붙여 넣는다.
두 번째 코드 부분(<script type="'text/javascript'"> 로 시작되는 코드) 을 카피한 후 블로그의 HTML 코드에 붙여 넣는다. 이번에는 ]]></b:skin> 태그와 </head> 태그 사이에 붙여 넣어야 한다. 붙여 넣은 소스코드에서 "http://YOURBLOG.blogspot.com"이라고 되어 있는 부분을 자신의 블로그 URL로 수정한다.

4. 레이블 클라우드가 보여야 할 부분에 위젯을 붙여 넣는다.
새 Blogger에서 레이블을 달고 있는 사람들은 보통 다음과 같은 위젯 코드를 갖고 있다. 위젯 코드는 &b:widget으로 시작되는데, Blogger에서 레이블을 사용하는 경우 보통은 아래와 같은 코드를 갖고 있다.

<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">

이 코드를 세 번째 코드 부분(<b:widget으로 시작되는 부분)으로 대체한다. 즉, <b:widget ... type="'Label'/">을 지우고 그 자리에 새로운 코드를 카피하여 넣는다. 템플릿을 저장한 후 "블로그 보기"를 하면 레이블 클라우드가 보여야 정상이다. 만일 안보인다면 처음부터 다시 차근차근 해 보시길.

5. 변수를 설정한다.
여기까지 완료했다면 레이블은 보일 것이다. 그러나 색, 폰트 크기 등은 조절해야 할 필요가 있다. 변수들은 3번에서 이야기한 것처럼 </head> 앞에 선언되어 있다.

폰트 크기는 maxFontSize, minFontSize를 조절하여 정하면 되고, 색은 minColor와 maxColor를 바꾸면서 설정할 수 있다. maxColor는 가장 많이 달린 레이블을 어떤 색으로 나타낼 것인가를 정하는 변수이다. 색은 [0,0,255]와 같은 형태로 정의되어 있는데, 앞에서부터 차례료 R, G, B 값을 의미한다. 중간 수치들은 두 값의 중간색으로 표현된다.

일정 수 이상의 포스트에 달려 있는 레이블들만 나타나게 하려면 cloudMin을 조절하면 된다. 예를 들어, 3개 이상 포스트에 달려 있는 레이블만 나타나게 하려면
var cloudMin = 3;
과 같이 설정하면 된다.

더 자세한 설명은 원 글을 참조 하시길.

[말꼬리] 아... 다 작성하고 보니 지저깨비님이 한글로 번역하여 두셨다. 내 글이 성의없게 느껴지거나 너무 짧다고 생각되는 분들은 여기에 가서 지저깨비님의 포스트를 읽어 보시길. ^^;;;