[티스토리] 움직이느 태그 클라우드 적용하기

움직이는 태그 클라우드 적용하기

 


 

티스토리 블로그에서 보통 태그 화면은 정적인 텍스트로 멈춰있습니다.

이것을, 움직이는 태그 클라우드로 멋지게 바꾸는 방법을 알아보겠습니다.

 

 

 

 

이런 형태로 표시되는 것이,

태그 클라우드가 적용된 모습입니다.

 

1. 첨부파일을 받습니다.

 

 

tagcloud.zip

 

 

2. 티스토리 - 관리자 페이지 - HTML/CSS 편집 메뉴 - 파일업로드로 들어갑니다.

 

 

 

 

 

3. 파일 업로드 탭에서 첨부 받은 파일을 업로드합니다.

 

 

 

업로드 한 파일이, 제대로 들어있는지 확인 한번 해주신 후 다음 단계로 넘어갑니다.

 

 

4. HTML/CSS 화면에서, skin.html 부분으로 들어갑니다.

 

 

 

 

Ctrl+ F 로 tag cloud 를 검색한 후, <u1>과 </u1> 사이에

소스를 넣어주시면 됩니다.

 

소스는 첨부된 파일에서, 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 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>

 

 

위의 소스를 넣어주시면, 움직이는 태그가 적용되는 것을 확인하실 수 있습니다.