Leave my path :: 딱딱한 태그목록을 세련되게 바꿔보자, Ti-Cumulus

딱딱한 태그목록을 세련되게 바꿔보자, Ti-Cumulus

2009/05/06 14:38

블로그에서 태그목록이란 해당 블로그가 주로 어떤 글을 올리는지, 어떤 주제가 인기있는지 등을
쉽게 알수 잇는 도표라고 볼수 있습니다.
하지만 그런 장점에 비해서 단순히 일렬로 배치된 태그 목록은 미관상 딱딱하고 예쁘지가 않아서
블로그를 꾸미는데 애로사항이 많은 부분이었습니다.

태그목록의 장점을 그대로 유지하면서 좀더 디자인적으로 꾸미기 위해서 개발된 WP-Cumulus라는
플러그인이 있습니다. 워드 프레스용 플로그인 인데요.
이를 BLUE'nLIVE 님께서 티스토리용으로 수정을해서 공개하셨습니다.

이름하여 Ti-Cumulus. 바로 위에 모습처럼 태그 목록을 구의 형태로 모아서 표시를 해주는 플러그인입니다.
현제 제 블로그에도 설치를 해놓았는데요. 단순히 이렇게 보여주기만 하는것이 아니라
마우스를 각 방향 끝쪽으로 위치시키면 태그 목록이 회전을 하기 때문에 좀더 세련되 보입니다.

설치방법은 어렵지 않습니다.

1. 파일 설치

먼저 아래의 압축파일을 다운을 받습니다.
압축을 풀면 tagcloud.swf 와 swfobject.js 라는 파일이 나옵니다.
이것을 티스토리 스킨편집에서 직접올리기 기능을 이용해서 올리도록 합니다.

TiCumulus.zip

클릭을 하시면 다운받으실수 있습니다.

2. 스킨 설정

스킨편집의 HTML/CSS 편집으로 들어가서 html 부분에서 다음과 같은 부분을 찾습니다.
물론 각자의 스킨에 따라서 약간의 차이는 있습니다만 random_tags 라는 부분은 들어있기 때문에
그것으로 찾으시면 됩니다.

<s_random_tags>윗부분에

</s_random_tags> 아랫부분에

<a href="" class=""> </a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
t.addVariable("tcolor", "0x222222");
t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");
t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
t.write("TiCumulus");
</script>

를 집어넣어주시면 됩니다. 아래 텍스트 파일에서 잘라서 붙여넣으시면 됩니다.

태그클라우드.txt

이렇게 집어넣으셨으면 기본 설치는 끝나신겁니다.
남은건 각자의 블로그에 맞게 세팅을 하시는것뿐이죠.

설정을 조금 살펴보면

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

이부분에선 직접 올린 swf파일을 불러오는것과 크기와 배경색을 설정하실수 있습니다.
100%는 가로크기 200은 세로크기입니다. 그리고 #ffffff 부분은 배경색입니다.
가로크기와 세로크기는 딱히 손을 댈필요가 없을것같고 배경색만 블로그 배경에 맞게 수정해주시면 됩니다.
(배경색은 보통 css 맨위에 보면 나와있을겁니다.) 저에 경우엔 #3d3d3d로 수정을 했습니다.

t.addVariable("tcolor", "0x222222");

이부분은 태그의 기본색상을 설정하는 부분입니다.
여기서 0x는 나두시고 뒷부분에 원하는 색상코드를 집어넣으면 됩니다.
저에 경우엔 a2a2a2를 집어넣어서 0xa2a2a2 로 수정을 했습니다.

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

위에는 존재하지 않는것입니다만 중요도, 선호도에 따라 색상을 바꾸고 싶다 하면
추가로 tcolor2를 한줄 집어넣으시면 됩니다. 중요도에 따라 tcolor 과 tcolor2 사이의 색상으로 보여집니다.
또한 hicolor 이란 항목도 있는데요. 태그위에 마우스를 올려놨을때 보여지는 색상을 설정하는 항목입니다.
tcolor2 대신 hicolor을 집어넣으시면 되겠죠.(뭐 둘다 추가해주셔도 됩니다.)

그 외 부분엔 딱히 수정을 할 필요가 없어보이기도 하고 잘 모르기도 하기에 생략하도록 하겠습니다.
좀더 설정을 세밀하게 세팅하게 하고싶으신분은 워드 프레스용 Cumulus인
WpCumulus 사이트 Roytanck 로 가셔서 알아보시면 될것같네요. 물론 영어로 되어있습니다.