남들처럼 구름 모양의 태그 클라우드를 달고 싶어졌습니다. 가볍게 구글 신에게 물어보니 워드프레스에 Cumulus 라는 위젯이 있고, 이것을 티스토리 용으로 포팅을 해 주신 분이 있더군요. 지금은 textcube 용으로 버전업을 꾸준히 하고 계신데, 최신 버전은 용량을 위해 예쁘지(?) 않은 폰트를 사용하시는 것 같아서 예전 버전을 이용했습니다.

설치 과정은 2 단계 입니다.

1. 파일의 설치

아래 링크를 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다. 이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.

2. 스킨수정

우선 찾아야 하는 부분은 <s_random_tags> 밖에 있는 <ul>~</ul>이다.

  <ul>
    <s_random_tags>
    <li>
      <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a>
    </li>
    </s_random_tags>
  </ul>

위의 부분을 지우고 아래의 소스코드로 대체를 한다.

 <div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</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.addParam("wmode", "opaque");
  t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').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>

굵은 부분은 Light TT 플러그인과 융합이 잘 되도록 추가된 부분입니다.

모든 정보는 http://zoc.kr/543 에서 인용하여 가져왔습니다.

+ Recent posts