남들처럼 구름 모양의 태그 클라우드를 달고 싶어졌습니다. 가볍게 구글 신에게 물어보니 워드프레스에 Cumulus 라는 위젯이 있고, 이것을 티스토리 용으로 포팅을 해 주신 분이 있더군요. 지금은 textcube 용으로 버전업을 꾸준히 하고 계신데, 최신 버전은 용량을 위해 예쁘지(?) 않은 폰트를 사용하시는 것 같아서 예전 버전을 이용했습니다.

설치 과정은 2 단계 입니다.

1. 파일의 설치

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

2. 스킨수정

우선 찾아야 하는 부분은 <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>

위의 부분을 지우고 아래의 소스코드로 대체를 한다.

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

굵은 부분은 Light TT 플러그인과 융합이 잘 되도록 추가된 부분입니다.

모든 정보는 http://zoc.kr/543 에서 인용하여 가져왔습니다.

  1. Favicon of https://gguro.com (gguro) 2010.01.21 00:18 신고

    결국 이것을 했군.
    나도 저 태그 구름을 보면서 막연히 '그냥 간단한 플러그인만 체크하면 되겠지'라고 생각하고 있었는데,
    뭔가를 설치하고 수정하는 과정이 필요하군.
    뭐 그래도 복잡하진 않군.

  2. 모아 2010.01.21 03:03

    플래시는 아직 구글폰에서 안보여요 ㅠㅠ
    그래도 아이폰보다 먼저 지원되겠지만요 캬캬캬

    • Favicon of https://blog.hshin.info Ens 2010.01.21 03:38 신고

      어차피 모바일은 http://hshin.info/m 을 이용해서 접속하는게 좋을텐데..

    • Favicon of https://gguro.com (gguro) 2010.01.21 20:51 신고

      오호 슬래쉬m 이라는 게 있었군.
      http://gguro.com/m 도 있네.
      놀랍군.
      모바일기기 시대를 두려워하는 1인

    • Favicon of https://blog.hshin.info Ens 2010.01.21 21:21 신고

      이것 때문에 textcube 로 못 넘어가고 있다는...

  3. Favicon of http://franco.tistory.com 키키 2010.01.21 17:02

    ㅎ 저도 이거 달았는데! 전 이거 다느라고 고생했었어요. 코드 이해를 잘 못해서.. ^^;

    • Favicon of https://blog.hshin.info Ens 2010.01.21 21:18 신고

      블로그에 달려 있는 거 보고.. 소스 읽어서 원제작자 블로그 찾아가서 한 거에요.. ^.^
      감사합니다. :)

  4. 병철 2010.01.21 17:29

    폼은 나는데... 실제로 원하는걸 찾아서 선택하기는 더 불편해보이는걸... 쩝.

    • Favicon of https://blog.hshin.info Ens 2010.01.21 21:19 신고

      원래 그 거 눌러서 오는 사람이 거의 없었으니..
      말 그대로 폼이라고 생각해도 될 듯..

  5. Favicon of htpp://iiphonestory.tistory.com/ 아혼 2010.03.02 13:47

    감사합니다. 덕분에 쉽게 적용했네요.^^

    • Favicon of https://blog.hshin.info Ens 2010.03.02 20:00 신고

      도움이 되셨다니... 다행이네요.. ^.^

  6. Favicon of http://heat1995.tistory.com/ 견인광선 2010.05.03 17:32

    감사합니다. 설치 잘했어요.
    태그를 너무 난무하지않게 사용하면 좋을듯하네요.

    • Favicon of https://blog.hshin.info Ens 2010.05.03 20:49 신고

      저는 태그를 30개 보여 주고 있는데..
      10개 정도로 줄여도 좋을 것 같기도 해요..

  7. Favicon of http://softroom.pe.kr 물에빠진새 2010.05.06 16:34

    어떻게 구현하나 궁금했었는데.. 덕분에 제 블로그에 달아놨어요... HTML을 모르니 좀 답답하긴 하지만 그냥 Cut and Paste 로 ...

  8. Favicon of http://garodonn.tistory.com/ 니뽄 2010.09.13 07:40

    감사합니다 너무 잘됫어요 !

+ Recent posts