플래시 태그 클라우드(Word Press) 설치

얼마전 태그 클라우드를 플래시로 만들어 놓은 이쁜 플러그인이 존재한다는 것을 알게 되었다.

일명 Tag in flash 라 불리우는 태그 클라우드를 티스토리에 설치하는 방법을 소개할까한다. BLUEnLIVE's ZocKrWorld (원본)라는 분께서

Roy Tanck

이라는 분이 만든 원래 해외에서 존재하는 이 프러그인을 티스토리에서 사용 할 수 있게 만들어 주셨다.

TiCumulus.zip

위 파일을 다운받고 압축을 풀면 swfobject.js와 tagcloud.swf 파일 2개가 보인다. 이 두개의 파일을 티스토리의 스킨>HTML/CSS 메뉴에 들어가서 파일 업로드 기능을 이용해서 업로드 해준다.

그 다음 HTML/CSS 편집창에서 아래 소스 파일을 찾는다.
Ctrl + F 로 찾으면 본인의 소스에 태그에 관한 소스가 있을 것이다.

<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="" class=""> </a>
    </li>
</s_random_tags>
 </ul>
 </div>
</div>

<ul> </ul> 태그 안에 내용을 아래와 같이 수정한다.

<div id="htags" style="display:none;"><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(/&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>

그냥 본인의 소스 <ul> </ul> 태그 사이에 위 소스를 Copy & Paste 해주면 될 것이다.

미리보기로 확인하여 빙글빙글 돌아가는 간지나는 플래시 태그 클라우드가 보인다면 성공이다. Mission Success~! ^^

관련사이트
Word Press 자료 정리 블로그