[티스토리] 간지나는 태그 만들기

어떤 블로그에 방문을 하면 움직이는 태그를 올려놓은 블로그가 있다. 

태그의 움직임과 3D 로 구현되는 태그 부분을 갖고 싶어 검색을 찾아 보니 쉽게 하는 방법이 있어 이번에 올리도록 하겠습니다. 

먼저 아래 파일을 티스토리에 HTML/CSS 편집에서 파일 업로드를 해줍니다.

간지태그.zip

해당 부분을 압출파일을 풀면 2개 파일이 존재합니다. swfobject.js와 tagcloud.swf 파일 2개가 등록을 해준후에 

HTML/CSS 파일을 열어 <s_random_tags> 와 </s_random_tags> 의 부분을 찾은후에 

관련 부분 기존 소스를 지우고 해당 부분의 소스를 카피해서 처리하면 됩니다. 

------------------추가 소스 부분 ---------------------------------------------------------------------------

<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>

-------------------------------------------------------------------------------------------------------------

간지태그_소스.txt

하면 완성 저장후에 화면을 보시면 TAG 부분이 3D 로 변경해서 완료..