티스토리에서 기본으로 제공되는 태그 사이드바 위젯을 태그구름으로 폼나게 바꿔봅시다.
이를 위해선 파일을 직접 업로드 하고, HTML소스를 수정해야 하는데, 그리 어렵지 않은 과정인 것 같아 포스팅 합니다. 출처는 http://hshin.info/282 임을 밝힙니다.

Step1. 태그구름 파일 업로드하기

아래 링크를 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다. 이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
 




파일을 업로드 한 후 HTML수정 창으로 돌아와 찾아야 하는 부분은 <s_random_tags> 밖에 있는 <ul>~</ul>입니다.




<ul>
    <s_random_tags>
    <li>
      <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a>
    </li>
    </s_random_tags>
  </ul>

그리고 위의 부분을 찾아서 이 소스를 몽땅 지우고, 아래의 코드로 대체 합니다.
굵은 부분은 Light TT 플러그인과 융합이 잘 되도록 추가된 부분입니다.

<div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</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.addParam("wmode", "opaque");
  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>
Posted by designeer shyfragrance

댓글을 달아 주세요