Cumulus for Textcube.com 1.23

티스토리에서 텍큐닷컴으로 넘어옴에 따라 이 명품 플러그인을 텍큐닷컴 용으로 포팅했다.
포팅시 최신버전인 1.23으로 업데이트를 병행함.

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


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

설치 과정은 아래와 같다.


1. 파일 설치

아래 파일을 다운받아 압축을 풀면 j_swfobject.gif, j_TeCumulus.gif, s_tagcloud.gif의 3개의 파일이 나온다.
이  세 파일을 스킨 직접올리기 기능을 이용해서 올린다.



2. 스킨 수정 #1

본문 최상단에 아래의 코드를 적는다.
<body> 태그 바로 다음 줄에 적으면 된다.

<script type="text/javascript" src="http://(블로그 이미지 주소)/j_swfobject.gif"></script>
<script type="text/javascript" src="http://(블로그 이미지 주소)/j_TeCumulus.gif"></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="TeCumulus"><p>Textcube 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("http://(블로그 이미지 주소)/s_tagcloud.gif", "TeCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>


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

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

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


덧. 설치 방법이 다소 바뀐 부분이 있어 설치방법을 새롭게 포스팅했다.
WP-Cumulus 1.23에서 내부적으로 바뀐 부분이 링크의 주소가 http://으로 시작하는 절대주소만 인식한다는 것이다.
이에 따라 절대 주소를 명시하도록 수정했다.

Trackback 2 Comment 53
  1. 이전 댓글 더보기
  2. 2009.12.20 16:41 address edit & delete reply

    비밀댓글입니다

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.20 17:01 address edit & delete

      보냈습니다. ^^;

  3. Favicon of http://mahabanya.com BlogIcon mahabanya 2009.12.21 05:13 address edit & delete reply

    연말, 혹은 연초에 스킨을 갈아버릴 생각인데 그 때 BBCode랑 같이 적용하게 되겠군요^^

  4. Favicon of http://elegie.textcube.com BlogIcon 엘레지 2009.12.29 22:26 address edit & delete reply

    좋은 위젯 감사드립니다.
    저도 위의 분처럼 기존 버전과는 다르게 폰트가 벡터형식으로 확대 안되는건지 각져보이길래
    WP 플러그인사이트에서 1.23버전 받아서 폴더에서 swf만 교체해주니 해결되는군요.
    물론 s_tagcloud.gif로 이름 바꿔주고 스킨과 같이 압축해서올렸습니다.
    한참을 씨름을 했는데 해결되니 기분 좋군요.. 이런 현상 있으신 분은 시도해보시길...

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.30 12:43 address edit & delete

      그럼 한글이 표시가 안 됩니다...

    • Favicon of http://elegie.textcube.com BlogIcon 엘레지 2009.12.30 23:07 address edit & delete

      헛.. 그러네요.
      구버전으로 대체를 해야겠네요 ㅠㅠ

  5. Favicon of http://wincomi.wo.tc BlogIcon 윈컴이 2010.01.06 17:40 address edit & delete reply

    저는 바로 위에 있는 http://sapkunnanmu.textcube.com/32 방법으로 했다는 것...

  6. Favicon of http://adtory.textcube.com BlogIcon 쌍구™ 2010.01.10 17:18 address edit & delete reply

    초짜에겐 너무나 어렵네요 ㅠㅠ

    파일 설치 해도 스킨 수정 #1, 2를 못따라 가겠네요. ㅠㅠ

    어떻게 해야 할까요?

  7. Favicon of http://whitestar.textcube.com BlogIcon 하얀별 2010.01.17 21:58 address edit & delete reply

    해당 기능을 저의 블로그에 설치 했는데 타 페이지에서 저의 블로그에 링크를 통하여 들어올시 해당 기능이 멈추는 현상이 있습니다. 한번 그 테그 클라우드 부분을 클릭하지 않으면 마우스를 올려 두어도 돌지 않습니다.
    또한 <ul> ~ </ul>사이를 바꾸어 주면 되는 겁니까? 아니면 <ul> ~ </ul>을 포함하여 바꾸어 주어야 정상 작동하는 것입니까? 개인적으로 <ul> ~ </ul>사이만 바꾸어 주었지만 멈춤현상이 있는 것으로 보아 <ul> ~ </ul>까지 포함하여 빼주어야 멈춤현상이 사라지나 해서 여쭈어 봅니다.

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2010.01.17 22:16 address edit & delete

      1. 제가 접속해보니 멈추지 않네요.

      2. <ul>을 포함해서 바꿉니다.

  8. Favicon of http://proslab.tistory.com/ BlogIcon Mr.Pro 2010.01.19 02:31 address edit & delete reply

    안녕하세요!!
    제가 요걸 열심히 해봤는데 잘 안되네요...
    블로그 이미지 주소는 머고, 절대 주소는 뭔가요??
    절대주소는 http://proslab.tistory.com/ 이거 맞죠?

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

    이렇게 나오는데 어떻게 해야하죠?

  9. Favicon of http://jong970105.textcube.com BlogIcon jong970105 2010.01.19 13:54 address edit & delete reply

    티스토리인데 저는 안되네요.... Syntax Highlighter도 적용 안됩니다.ㅠㅠ
    옛버젼에선 잘 됐는데..
    [ur=http://jong970105.tistory.com/191]http://jong970105.tistory.com/191[/ur]


    그리고 텍스트큐브닷컴에는
    </s_random_tags> 이게 없네요....
    아예 태그를 보여주는 위젯자체가 없습니다.
    [ur=http://jong970105.textcube.com/]http://jong970105.textcube.com/[/ur]

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2010.01.19 20:07 address edit & delete

      텍큐닷컴 스킨 중에 태그 클라우드 위젯이 없는 놈들이 있더군요.
      태그 클라우드 위젯을 만들어줘야 합니다.

  10. Favicon of http://jong970105.textcube.com BlogIcon jong970105 2010.01.19 21:53 address edit & delete reply

    [ur=http://sapkunnanmu.textcube.com/32]http://sapkunnanmu.textcube.com/32[/ur]
    위의 블로그 내용과 여기와 짬뽕을 해서 해냈습니다.!!!ㅠㅠ

    근데 여전히 티스토리에선 안되네요...(뭔가 꼬인듯...)

  11. 2010.01.28 03:41 address edit & delete reply

    비밀댓글입니다

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.01.28 12:48 address edit & delete

      이제 다른 글꼴 버전은 제작/공개하지 않으려고 합니다.

  12. Favicon of http://kclover.sm.to/ BlogIcon 커피클로버 2010.04.21 22:09 address edit & delete reply

    안녕하세요~ 구름 태그 검색하다가 제 블로그에 적용시켜보려고 질문 드리는데요 1.22버젼으로 텍스트큐브에 적용 시켜보려고 몇시간동안 고생하다 1.23버젼이 텍스트큐브 버젼이라는걸 알게됐습니다 ㅎ; 다름이 아니라 블로그 절대 주소는 알겠는데 이미지 주소를 못따와서 몇시간째 헤메고 있네요 압축 풀면 나오는 3파일을 텍스트큐브에 업로드도 시켜보고 스킨이 깔린 폴더에 붙여 넣기도 해봣는데 image 라는 단어는 못찾겠더라구요 아직 시작한지 얼마 되지 않아서 많이 부족하네요 ㅎ; 블로그 이미지 주소 어디서 찾아야 하는지 알려주시면 감사하겠습니다^^;

  13. qp 2010.12.19 12:07 address edit & delete reply

    스킨 좀 멋집니다.
    다시 여러 가지 기능들 한창 적용중이신가 보네요.
    이거 적용된거 마우스 올려놓고 돌려보다 '여전한 새관리의 멍청한 버그'와 '게으른 티스토리 개발자들'이 눈에 띄네요. ㅎㅎ
    1년을 다른 곳으로 갔다 돌아왔는데 버그는 여전한가 보네요.
    공식블로그 공지 올라오는거 보면 항상 뭔가 분주해 보이기는 하던데 말이죠.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.19 12:16 address edit & delete

      이전 스킨은 주변에서 태클이 좀 있어서요... ㅎㅎㅎ
      티스토리는 여전히 원래 있는 기능을 안정적으로 완성시키는 건 관심이 없더군요.
      그런다고 진짜 새로운 기능을 추가하는 것도 아니고... 쩝

  14. 2010.12.19 20:23 address edit & delete reply

    비밀댓글입니다

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

      헤더에 코드를 그대로 안 올렸네요

      다른 부분은 모르겠습니다. 블로그 스킨을 볼 수가 없으니까요.

    • 2010.12.19 21:59 address edit & delete

      비밀댓글입니다

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

      이제 제대로 붙여넣으셨네요.
      글을 쓰면서 태그를 써보시면 동작할 겁니다.

      아깐 ./images 에서 ./ 가 빠져있었습니다.

  15. 2010.12.20 18:41 address edit & delete reply

    비밀댓글입니다

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.20 19:03 address edit & delete

      1. 다시 한번 소스를 꼼꼼히 읽어보시기 바랍니다.
      더 이상은 드릴 말씀이 없네요.

      2. 안 됩니다.

  16. 2010.12.21 12:16 address edit & delete reply

    비밀댓글입니다

  17. Favicon of http://hazle.wo.tc BlogIcon hazle 2010.12.21 14:16 address edit & delete reply

    제가 만들고있는 블로그에 추가했습니다.
    그런데 한가지 문제가..
    이 블로그에 있는것처럼 테두리도 나오지가 않고 해당 태그를 클릭시에도 해당 클릭된 태그에 관련된 글목록도 출력이 되지 않습니다.
    어떻게 해야 하나요?

    헤더 부분에
    <script type="text/javascript" src="./images/swfobject.js"></script>
    <script type="text/javascript" src="./images/TiCumulus.js"></script>
    추가 했고

    <ul>과 </ul>을 지우고

    <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('(http://hazle.wo.tc.)')
    };
    var params = {
    allowScriptAccess: "always",
    wmode: "transparent"
    };
    swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
    //]]>
    </script>

    위와 같이 입력하였습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.21 19:38 address edit & delete

      innerHTML.E4Cumulus('(http://hazle.wo.tc.)')
      를 잘못 썼네요.

      본문을 다시 한번 잘 읽어보시기 바랍니다.

  18. Favicon of http://hazle.wo.tc BlogIcon hazle 2010.12.21 19:48 address edit & delete reply

    절대 경로를 변경해도 클릭이 안됩니다.
    다른건 봐꾸지 않고
    방금 위에서 언급하신 부분만

    ('(http://hazle.wo.tc/)')
    로 봐꿔봤는데 되지 않아

    댓글들을 읽다보니
    ('(http://hazle.wo.tc/images/)')

    images를 붙여야 한다고 해놓으셔서 붙여 보기까지 했는데 클릭시 동작이 되질 않습니다.

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

      ('http://hazle.wo.tc/')

  19. Favicon of http://akchyun0716.tistory.com/ BlogIcon 智音 2010.12.22 19:31 address edit & delete reply

    구름태그를 설치했는데 태그 바탕색이 사이드바 바탕색이 아니라 블로그 바탕색으로 나오고, 글자색과 글자 강조색도 제가 원했던 색깔로 나오질 않네요.
    제가 어딜 잘못한건가요?


    <div id="tagcloud" class="widget">
    <h3>Tag</h3>
    <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: "#dddddd",
    hicolor: "#ffffff",
    bgcolor: "#000000",
    tspeed: "200",
    distr: "true",
    mode: "tags",
    tagcloud: document.getElementById('htags').innerHTML.E4Cumulus('(http://akchyun0716.tistory.com/)')
    };
    var params = {
    allowScriptAccess: "always",
    wmode: "transparent"
    };
    swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
    //]]>
    </script> </div>

  20. Favicon of http://thefleastory.com BlogIcon 벼룩이 2011.01.03 19:53 address edit & delete reply

    익스플로러에서는 잘 되고 있습니다. ^^
    근데 이상하게 크롬에서는 보여지지가 않는군요 -0-
    조커님과 같은 스킨 사용중입니다. ㅠ.ㅠ

    도움이 필요합니다... 답변좀 주세요^^

    • Favicon of http://thefleastory.com BlogIcon 벼룩이 2011.01.03 20:39 address edit & delete

      앗... 지금보니

      잘되고 있습니다. ^^ ㅎㅎ

      좋은태그 감사합니다.

      새해복많이 받으세요 ㅎㅎ

  21. Favicon of http://happytrees.co.kr BlogIcon jinamx 2011.02.20 21:43 address edit & delete reply

    저 궁금한게 있어요 [emo=109]
    기존 스킨에 태크목록이 없을경우 어떻게하죠 ㅠ.ㅠ

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

      스킨을 다른 것으로 바꾸셔야죠.