[티스토리] TAG에 입체 효과를 주자 - 3D 구름태그 ( CloudTag )

티스토리를 처음 시작하고 글을 작성할때 태그를 달면 밋밋한 텍스트로만 투투툭 쓰여 있다. 

그래서 많이들 사용하는게 플래쉬를 이용한 구름태그를 사용한다. 오늘은 그 구름태그 적용법을 알아보자.

   -->     

먼저 아래 파일을 다운받고 압축을 풀어줍니다.

TISTORY구름태그.zip

이후 HTML / CSS 편집 란으로 가서 파일 업로드 탭으로 갑니다.

이번에는 플래쉬파일이 사용되기 때문에 미리 티스토리에 업로드 해 줄 필요가 있습니다.

추가를 누르시고 소스코드.txt 파일외에 나머지 두개 파일을 업로드 해 줍니다.

정상적으로 업로드 됐는지 확인은 필수적으로 해주시고 그다음 다시 HTML/CSS 탭으로 가셔서

아래와 같은 부분을 찾아줍니다. 스킨에 따라 <h3> </h3> 사이에 들어가는게 많이 다르더라고요 

그래서 저는 아예 <h3>으로 검색을 했습니다. 

저부분에서 <ul> </ul> 사이 내용을 싹 지워주시고 첨부된 소스코드 를 붙여 넣어 주시면 됩니다.

혹시 복사하실 분을 위해 코드는 아래에 첨부합니다.

<!-- 3D 구름태그 시작 -->

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

<!-- 3D 구름태그 끝 -->

추가해 주시고 저장 해주시면 매인화면의 태그가 구름처럼 빙글빙글 돌면서 변경됩니다.