태그클라우드 만들기

왼쪽의 화면에 보이는 태크클라우드를 만드는 방법

일반적인 선형구조의 나열방식보다는 멋진 UI를 원할 경우 워드프레스용 플러그인을(http://bit.ly/cCvQX) 사용하면 가능하다.
다운로드 : http://wordpress.org/extend/plugins/wp-cumulus/download/
구동 원리는 태그목록을 플래쉬파일이 읽어서 보여주는 방식이고
원본소스를 보면 여러가지 파라미터를 조정하는 방식으로 구현되어 있다.

티스토리에는 없길래 하나 만들어 쓸까하는 생각에 소스를 보다가
혹시나 하고 검색해보니 역시 자랑스런 한국인. 벌써 만들어 두신 분이 있다.

티스토리 용으로 만들어 주신 분 :  http://zoc.kr/543
위 링크를 방문해서 소스를 다운로드받으세요.

다운받은 파일을 압축해제하면 swfobject.js, tagcloud.swf 파일이 있는데 이 파일들을 "티스토리 관리자>스킨>HTML/CSS편집>직접파일 업로드"를 통하여 업로드한다.

업로드 후 티스토리 관리자 > 스킨 > HTML/CSS편집 을 이용하여         <s_sidebar_element> 부터  </s_sidebar_element>사이에 내용 대신 아래처럼 수정해준다.

        <s_sidebar_element>
        <!-- 태그목록 모듈 -->
        <div id="tagbox">
<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(/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>
        </div>
        </s_sidebar_element>

붉은색 부분을 수정하면 옵션으로 몇가지 설정이 가능하니 자신의 블로그에 맞게 사용하자.

"100%", "200" : 가로, 세로의 크기
"#ffffff" :  배경의 색상