Cumulus for TiStory.com 1.23

티스토리가 본 블로그의 데이터를 다 날려버리는 덕분에 다시 작성한 포스팅임.

텍큐닷컴이 문을 닫게 되어 이 플러그인을 다시 티스토리 용으로 포팅했다.
이 플러그인은 Roy Tanck 님이 워드프레스 용으로 개발한 것티스토리 용으로 포팅했다가 다시 텍큐닷컴 용으로 포팅한 것을 또 다시 티스토리 용으로 포팅한, 나름의 역사와 전통흑역사가 있는 플러그인이다.
물론, 최신버전인 1.23을 포팅함.

기존 버전 이미지 재활용. 외형적으로 바뀐 건 없음.


1.23에서는 보안 Cross-Site Scripting (XSS) 취약점을 완전히 없애기 위해 구조를 일부 바꿨는데, 관련 포스팅은 읽지도 않고 냅다 덤볐다가 수정에 시간을 좀 낭비했다. 쩝.


설치 과정은 아래와 같다.


1. 파일 설치

아래 파일을 다운받아 압축을 풀면 swfobject.js, TiCumulus.js, tagcloud.swf의 3개의 파일이 나온다.
이  세 파일을 스킨 직접올리기 기능을 이용해서 올린다.



2. 스킨 수정 #1

스킨의 헤더 영역에 아래의 코드를 적는다.
</head> 태그 바로 앞에 적으면 된다.

<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript" src="./images/TiCumulus.js"></script>


3. 스킨 수정 #2

스킨에서 아래와 같은 부분을 찾는다.
스킨마다 조금씩 모양이 다르지만, 공통적으로 있는 부분이 <s_random_tags> ~ </s_random_tags>이다.

<div id="tagcloud" class="widget">
  <h3 style="padding-bottom:3px;">Tag clouds</h3>
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
</div>


여기서 <s_random_tags>의 바깥쪽에 있는 <ul> ~ </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://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
  var flashvars = {
  tcolor: "0x2970A6",
  hicolor: "0x462A56",
  bgcolor: "#f7f7f7",
  tspeed: "100",
  distr: "true",
  mode: "tags",
  tagcloud: document.getElementById('htags').innerHTML.E4Cumulus('블로그 절대주소')
  };
  var params = {
  allowScriptAccess: "always",
  wmode: "transparent"
  };
  swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>


여기서 자신의 블로그에 맞게 수정해야 되는 변수는 아래와 같다.

- tcolor: 글자색
- hicolor: 글자 강조색
- bgcolor: 배경색
- tspeed: 움직이는 속도

그리고, 블로그 절대주소는 http://와 마지막 /를 포함하는 주소이다. 본 블로그에서는 http://zockr.tistory.com/을 사용한다.


덧. WP-Cumulus 1.23에서 내부적으로 바뀐 부분이 링크의 주소가 http://으로 시작하는 절대주소만 인식한다는 것이다.
이에 따라 절대 주소를 명시하도록 수정했다.

Trackback 0 Comment 9
  1. Favicon of http://blog.saga.wo.tc BlogIcon SAGA[사가] 2011.03.08 20:20 address edit & delete reply

    귀차니즘으로 티스토리를 벗어나지 못하는 저에게 언제나 도움이 되는 양념(?!)을 만들어 주셔서 잘 사용하고 있습니다ㅠㅠ

    ...만 마지막에 embedSWF에 들어간 인자값 중에 div명이 [color=red]TeCumulus[/color]로 되어 있군요..
    제 블로그에 적용 후 크롬에서 보다가 플래시가 설치 안되있나 하고 순간 당황했습니다ㅋㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.03.08 20:32 address edit & delete

      고맙습니다. 샤샤샥 수정 완료했습니다.

  2. Favicon of http://hanr.maru.net/ BlogIcon 아름 2011.03.09 12:25 address edit & delete reply

    <script type="text/javascript" src="./TiCumulus.js"></script> 이부분
    src="./images/TiCumulus.js" 로 바꿔줘야할듯해요 ㅎㅎ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.03.09 20:23 address edit & delete

      어? 그렇네요. 고맙습니다.

  3. BlogIcon ㅠㅜ 2011.04.15 20:16 address edit & delete reply

    TiStory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.

    자꾸 이런 오류가 뜨는데 어떻게 해야되나요ㅠㅠ

  4. Favicon of http://storyblog.co.kr BlogIcon 인쇄쟁이 2011.04.18 02:42 address edit & delete reply

    폰트체가 이상한 폰트체가 뜨는데요~

    폰트체는 어디서 수정하는걸까요^^

    알려주시면 감사하겠습니다^^

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.04.19 01:22 address edit & delete

      글꼴은 수정 불가입니다.

  5. Favicon of http://joshsarmy.tistory.com BlogIcon isao 2011.05.31 03:03 address edit & delete reply

    <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://zockr.tistory.com">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>

    위의 코드를 넣었는데.. 태그가 랜덤으로 안나오고 최신 태그만 나오네요... 어디가 잘못 되었을까요...
    도와주세요.. 힝..

  6. Favicon of http://hextopasin.tistory.com BlogIcon 헥토파신 2011.08.08 22:43 address edit & delete reply

    안녕하세요^^
    구름 태그 수정하다 도저히 안나와서 질문 드립니다.

    <div class="tagbox">
    <h5>&raquo; by tags</h5>
    <!-- <p class="moreTag"><a href="">more..</a></p> -->

    <!-- 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 <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div><script type="text/javascript">//<![CDATA[ var flashvars = { tcolor: "0x2970A6", hicolor: "0x462A56", bgcolor: "#f7f7f7", tspeed: "100", distr: "true", mode: "tags", tagcloud: document.getElementById('htags').innerHTML.E4Cumulus('블로그 절대주소') }; var params = { allowScriptAccess: "always", wmode: "transparent" }; swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);//]]></script>
    <!-- 3D 구름 태그 종료 -->
    </div>

    </div>
    <div class="round_bottom"><p class="round_bottom_l"></p><p class="round_bottom_r"></p></div>
    </div>

    이렇게 수정했는데요;;
    TiStory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.
    라고만 나오고 플래시 작동이 안나오네요;;
    새로고침을 해봐도, 계속 기달려봐도 플래시가 안되더라구요;;
    답답한 마음에 이렇게 댓글을 남깁니다..
    귀찮게 해드려서 죄송합니다..
    P.S
    혹시 스킨의 차이인가요..?
    참고로 제 스킨은 텍스트큐브에서 다운 받아 직접올리기로 한건데;;