[Blog]태그 목록을 꾸며보자 - Ti-Cumulus

사이드바에 위치하는 Tag Cloud(태그 목록)는 사용자에게 아주 유용한 기능임은 분명하다.
하지만, 태그수를 많이 하자니 지져분해지고, 적게 하자니 태그의 활용도가 떨어지기 마련이다.

그리하여 개발된 것이 자바스크립트 기반 3D 태그 클라우드 - Cumulus 이며,
이는 다시 티스토리용으로 수정 되어 배포되고 있다. BLUEnLIVE

태그가 둥둥~~ 날아다니는 갓이 외관이 화려하며, 태그 활용도도 늘릴 수 있어 일석이조의 효과가 있다.

그 자바스크립트 기반 3D 태그 클라우드 - Ti-Cumulus 의 설정법을 알아보고자 한다.

1. 파일 설치 하기

TiCumulus.zip 파일을 다운 받아 압축을 풀면 swfobject.js 와 tagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 자신의 블러그에 올린다.

TiCumulus.zip

2. 스킨 설정 하기

스킨편집의 HTML/CSS 편집으로 들어가서 html 부분에서 다음과 같은 부분을 찾는다.

물론 각자의 스킨에 따라서 약간의 차이는 있지만 <s_random_tags>는 꼭 있는 부분이기에 이를 검색하여 찾는다.

1) 스킨 설정 ①

<s_random_tags> 윗부분과

</s_random_tags> 아랫부분에 아래 그림과 같이 입력한다.

위 내용은 상위 그림의 태그 모습이며, 상세 설정을 통해 색상 변경이 가능하다.

2) 스킨 설정 ②

Ti-Cumulus.txt 를 다운받아 택스트 파일내의 내용을 자신의 HTML/CSS 편집에 붙여넣기 한다.

Ti-Cumulus.txt

 

3. 추가 상세 설정

위의 1,2 단계를 잘 따라왔다면 기본 설정은 완료된 것이다.

아래에서는 각 태그 설정에 대해 바꿔 줄수 있는 값들을 알아보겠다.

 

1) var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#202021");

    swf파일의 경로(./images/tagcloud.swf)와 태그 상자의 크기 및 배경색을 설정한다.

    100%는 가로크기 200은 세로크기이며 #202021 은 배경색이다.

    개인의 취향에 맞게 수정한다.

2) t.addVariable("tcolor", "0xafafbf");

    t.addVariable("tcolor2", "0x0000ff");

     태그의 기본색상을 설정한다.
     태그의 기본색상은 tcolor 에서 설정하며,

     빈도수가 높은 태그는 tcolor2 의 색상을 설정한다.

3) t.addVariable("hicolor", "0xffffff");

     태그위에 마우스를 올려놨을때 보여지는 색상을 설정한다.