플래시 Tag 목록 블로그에 적용하기!!

블로그 구성 요소 중 태그 목록이라는 좋은 기능이 있지만,
블로그 테마에 어울리지 않거나, 이쁘지 않아 쓰지 않는 사람이 있다.

태그 목록의 기능은 그대로 유지하면서, 미적 업그레이드를 한 플러그인으로 WP-Cumulus가 있다.

WP-Cumulus

외국에서 공개한 플로그로서, 워드 프레스용 전용 플러그인이다.
그래서 티스토리 블로그에는 한계가 있다.
가장 기본적으로 글꼴이 한글 글꼴은 없다. 영문 글꼴만 포함되어 있다.
그리고 워드 프레스용으로 개발되었기에 블로그 적용을 위해 수작업이 많이 들어간다.

하지만, 티스토리 전용 태그 클라우드가 공개됐다.
우선 적용하는 방법을 적어보겠다.

아래의 링크를 다운받아 압축을 풀면 swfobject.js 파일과 tagcloud.swf 두개 파일이 있을 것이다.
두 파일을 스킨 올리기 기능을 이용해서 업로드시킨다.

TiCumulus.zip

이제 스킨을 수정해야 하는데, 아래와 같은 내용을 우선 찾는다.

<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>

블로그 스킨이 조금씩 다르겠지만, 비슷한 형식이라 금방 찾을 수 있을 것이다.
<s_random_tags> 태그 상단에 보면 <ul>태그를 찾을 수 있는데
<ul>에서 </ul>로 닫기는 부분까지 아래 코드로 수정하면 된다.

<div id="tags">
<div id="htags" style="display:none;">
    <tags>
        <s_random_tags>
            <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
        </s_random_tags>
    </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>
</div>

중간쯤에 있는 스크립트 소스를 보면,
new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");라고 되어 있는데
"100%" 이라고 표기된 부분이 가로 길이이고, "200" 부분이 세로 길이를 나타낸 것이다.
그리고 #ffffff는 배경 색상을 나타낸다.