[티스토리] 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 구름태그 끝 -->
