티스토리 움직이는 3D 태그 클라우드 적용하는 방법

3D 태그 클라우드

티스토리 사용하는 분들이 정말 많아지고 있지요. 그러면서 이쁘게 블로그를 꾸미시려고 하시는 분들도 많습니다. 그런 분들을 위해 티스토리 움직이는 3D 태그 클라우드 적용 방법에 대해 알아보겠습니다. 일단 티스토리에 클라우드 적용할 파일을 준비합니다.

파일 다운로드

▼ 태그 클라우드 압축파일

Tag_Cloud.zip

0.37MB

위 압축파일을 받아 압축을 풀면 3개의 파일이 나옵니다.

1. script.txt
2. swfobject.js
3. tagcloud.swf

위 3개의 파일 중 script.txt 파일을 열어 소스 코드를 확인합니다.

Script.txt 코드확인

<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("hicolor", "0xE07000");
  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>

확인하시면 위와 같은 html 스크립트가 있을 거예요. 그걸 전체 복사하시고, 티스토리 편집에 Html으로 이동하여 태그 소스 있는 곳에 붙여 넣기 해줍니다. 위치는 대략 아래와 같은 곳에 있습니다.

Html 삽입 위치 확인

티스토리 치환자 tag_link 위치로 이동하여 바로 위에 붙여 넣기 합니다. 그럼 태그 클라우드 3D설정은 모두 마쳤습니다.

<!---- _tag_link_ ---->

<s_random_tags> <li><a href="" class=""></a></li> <s_random_tags>

설정 추가정보

Script.txt 파일에 있는 소스코드의 내용일부입니다.

<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("hicolor", "0xE07000"); // 마우스 오버시 색상
  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>

주석 처리되어 있는 곳의 값을 수정하여 원하는 스타일로 변환이 가능합니다.

지금은 플래시 미지원으로 사용할 수 없습니다.