Cumulus for Tistory 1.21a 업데이트! (버그패치 포함)

태그 구름을 멋지게 출력해주는 플러그인인 Cumulus for Tistory 1.21는 사소한 버그가 있다.

@, &, + 등 일부 태그가 제대로 출력되지 않거나, 출력이 되어도 정상적으로 클릭이 되지 않는 문제다.
일부 태그를 화면에 출력하지 않는 미봉책을 사용했었는데, 이걸 모든 태그에 대해 정상동작하도록 대폭 수정했다.

사용자 삽입 이미지

이렇게 & @ '



1. 파일의 설치

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

TiCumulus_v121a.zip

엔터튤립9 글꼴을 이용해서 만들어 파일 크기가 157KB밖에 안 됨



2. 스킨 수정 (새로 설치하는 것을 기준으로 함)

우선 헤더에 아래와 같이 두 줄을 추가한다.

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

다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾는다.

<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>

스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <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",
mode: "tags",
distr: "true",
tspeed: "100",
tagcloud: document.getElementById('htags').innerHTML.E4Cumulus()
};
var params = {
allowScriptAccess: "always",
wmode: "opaque",
bgcolor: "#f7f7f7"
};
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>

조금 길지만 소스 보기를 한 뒤에 복사하면 된다.

a. 22행"100%", "200"은 각각 가로, 세로의 크기임.

b. 20행"#f7f7f7"배경의 색상임.

c. 10행"0x2970A6"태그의 기본색상임.

d. 11행"0x462A56"선택된 태그의 색상임.

e. 1.21에 비해 바뀐 부분15행. 기존 버전에 비해 훨씬 정교하고 정확하게 변환하도록 수정되었음.

그럼 잘 쓰시기 바란다!!!

IE에서도 배경색이 잘 동작하도록 수정됨 (2009. 10. 19)
Trackback 1 Comment 46
  1. 이전 댓글 더보기
  2. Favicon of http://stringsitsc.tistory.com BlogIcon 스트링 2009.08.11 13:08 address edit & delete reply

    감사합니다^^

  3. Favicon of http://stringsitsc.tistory.com BlogIcon 스트링 2009.08.11 13:36 address edit & delete reply

    원래 2.0 버전을 사용하다가 업데이트했는데 계속 Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.라고 나와요. 물론 플래시 플레이어는 있고요.
    파일도 제대로 업로드했는데...
    무엇이 잘못되었는지 부탁드려요 ㅜㅜ

    다음은 제 HTML 헤더부분이에요.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <!-- RSS link -->
    <link rel="alternate" type="application/rss+xml" title="" href="" />
    <!-- Stylesheet -->
    <link rel="stylesheet" media="screen" href="./style.css" type="text/css" />
    <link rel="stylesheet" media="print" href="./images/print.css" type="text/css" />
    <!--[if IE 6]>
    <link rel="stylesheet" media="screen" href="./images/screen_ie6.css" type="text/css" />
    <![endif]-->
    <!--[if gte IE 7]>
    <link rel="stylesheet" media="screen" href="./images/screen_ie7.css" type="text/css" />
    <![endif]-->
    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- pageTitle -->
    <title> <s_page_title> :: </s_page_title></title>
    <script type="text/javascript">
    function getElementsByClass(searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    for(i=0; i<elsLen; i++){
    if(pattern.test(els[i].className)){
    classElements[j] = els[i];
    j++;
    if(els[i].id != "MF_Reference"){
    var result = els[i].innerHTML;
    els[i].style.display = "none";
    }
    }
    }
    return result;
    }
    </script>
    <!-- SyntaxHighlighter -->
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shBrushCpp.js"></script>
    <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
    <script type="text/javascript" src="./images/shBrushDiff.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPlain.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushMsx.js"></script>
    <script type="text/javascript" src="./images/shBrushAvs.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="./images/shThemeViolet.css"/>
    <script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
    </script>
    <!-- Cumulus for Tistory -->
    [b]<script type="text/javascript" src="./images/swfobject.js"></script>
    <script type="text/javascript" src="./images/TiCumulus.js"></script>[/b]
    </head>

    다음은 제 태그구름 부분이에요.

    <s_sidebar_element>
    <!-- 태그목록 -->
    <div id="tagbox" class="module">
    <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 = {};
    flashvars.tcolor = "0x282828";
    flashvars.hicolor = "0x4169e1";
    flashvars.mode = "tags";
    flashvars.distr = "true";
    flashvars.tspeed = "100";
    flashvars.tagcloud = document.getElementById('htags').innerHTML.E4Cumulus();
    var params = {};
    params.allowScriptAccess = "always";
    var attributes = {};
    attributes.bgcolor = "#ffffff"
    swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
    //]]>
    </script>
    </div>
    </s_sidebar_element>


    부탁드려요^^

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

      잘 되는데요

    • 스트링 2009.08.11 17:44 address edit & delete

      조금 지나니가 잘 되네요.
      제가 너무 성급했네요.ㅋㅋ

  4. Favicon of http://doodrim.tistory.com BlogIcon doodrim 2009.08.14 12:11 address edit & delete reply

    제 블로그에 태그 클라우드를 적용해봤는데,
    그냥 하얗게만 나옵니다. 왜 그럴까요?
    도움이 필요합니다. -ㅅ-

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.08.14 13:00 address edit & delete

      스킨 편집이 잘못되었군요.
      열심히 해보시란 말 밖엔 드릴 말이 없습니다.

    • Favicon of http://doodrim.tistory.com BlogIcon doodrim 2009.08.14 14:48 address edit & delete

      열심히 해보았답니다..ㅠㅠ
      소스 한번 봐주실래요?

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="alternate" type="application/rss+xml" title="" href="" />
      <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
      <link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
      <link rel="shortcut icon" href="favicon.ico" />
      <title> :: </title>
      <!-- Tag Cloud Start -->
      <script type="text/javascript" src="./images/swfobject.js"></script>
      <script type="text/javascript" src="./images/TiCumulus.js"></script>
      <!-- Tag Cloud End -->
      </head>

      ===========================================


      <s_sidebar_element>
      <!-- 태그목록 모듈 -->
      <div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
      <div class="boxMidR">
      <div id="tagbox">
      <h3 class="stitle">태그목록</h3>
      <!-- <ul>
      <s_random_tags>
      <li><a href="" class=""> </a></li>
      </s_random_tags>

      </ul> -->
      <!-- Tag Cloud Start -->
      <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 = {};
      flashvars.tcolor = "0x2970A6";
      flashvars.hicolor = "0x462A56";
      flashvars.mode = "tags";
      flashvars.distr = "true";
      flashvars.tspeed = "100";
      flashvars.tagcloud = document.getElementById('htags').innerHTML.E4Cumulus();
      var params = {};
      params.allowScriptAccess = "always";
      var attributes = {};
      attributes.bgcolor = "#f7f7f7"
      swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
      //]]>
      </script>
      <!-- Tag Cloud End --> </div>
      </div>
      <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>
      </s_sidebar_element>

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

      <ul>-</ul>을 안 지우고 주석으로 묶었군요.

    • Favicon of http://doodrim.tistory.com BlogIcon doodrim 2009.08.17 11:07 address edit & delete

      주석으로 묶으면 안되는거였군요.. 감사합니다 (_ _);

  5. jys 2009.08.17 18:29 address edit & delete reply

    감사합니다. 잘되네요.
    폰트가 조금 아쉬운 것 말고는 좋네요...ㅎㅎ;

  6. Favicon of http://uzoogom.com BlogIcon 우주곰 2009.09.02 13:57 address edit & delete reply

    햐.. 힘들었습니다 ㅜ_ㅜ 텍스트큐브닷컴에 적용할려고 별별 삽질끝에 완성했습니다.

    정말 맘에 드는군요! 감사합니다!

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

      아직 텍큐닷컴은 기능들이 안정화되지 않아 손이 많이 가는 것 같습니다.
      W3C에서도 js는 가급적 <head> 안에 두는 것을 원칙으로 하는데... 쩝쩝쩝.

      수고 많으셨습니다.

  7. Favicon of http://kakehasi.tistory.com BlogIcon 센쇼 2009.09.06 11:57 address edit & delete reply

    아,, 이거 한글만 지원되는건가요??

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.09.06 15:45 address edit & delete

      한글+영어 외엔 지원되지 않습니다.

  8. Favicon of http://elkha.tistory.com/ BlogIcon 엘카 2009.09.23 09:10 address edit & delete reply

    비비코드에 이어 잘 쓰겠습니다. 덥썩![emo=082]

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

      잘 쓰시기 바랍니다.

  9. Favicon of http://bsmsky.tistory.com BlogIcon 天上不非 2009.09.23 20:14 address edit & delete reply

    처음 블로그 꾸며보고 있다가 많은 도움 받고 갑니다.

    너무 감사하고 잘 쓰겠습니다.

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

      가보니 글이 하나도 없는데, 태그는 많네요.
      아마도 작성중인 글에 달린 태그인 듯...

      좋은 블로그 꾸미시기 바랍니다. ^^;

  10. Favicon of http://elkha.tistory.com/ BlogIcon 엘카 2009.09.26 07:41 address edit & delete reply

    태그클라우드 감사히 쓰고 있습니다.
    그런데 태그숫자는 어떻게 줄이나요?
    태그가 많아서 어지러워 보이네요... :x

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

      티스토리 설정에서 조절할 수 있습니다.

  11. Favicon of http://moms.pe.kr BlogIcon 함차가족 2009.09.30 10:17 address edit & delete reply

    태그 구름을 찾았었는데..필넷님의 안내로 방문하게되었습니다.
    너무 고맙습니다. 이쁜 태그구름 사용..넘 좋아요

  12. Favicon of http://hanmynez.tistory.com BlogIcon 몽상쟁이 2009.10.06 20:47 address edit & delete reply

    태그구름 넘 이쁘네여
    잘 사용하겠습니다.

  13. Favicon of http://negativeg.tistory.com BlogIcon Good_Speed 2009.10.10 17:58 address edit & delete reply

    이거 배경색 수정은 정녕 안되는 건가요??
    명려어가 안먹히면
    기폰 플래시 파일의 배경색을 바꿔서 업로드 시키면 될것 같은데
    FLV 파일이 없으니 수정도 안되고;;;
    쓸수가 없네요..

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 18:42 address edit & delete

      IE에서는 배경색이 먹지 않더군요. IE의 버그는 MS로...

  14. Favicon of http://starfield.tistory.com BlogIcon starfield 2009.10.21 19:45 address edit & delete reply

    이번에도 좋은거 얻어갑니다.
    그런데 전 배경색 수정이 되는데요?

    블로그 전체 폰트가 맑은 고딕이라
    폰트에 약간의 아쉬움이 있긴 함..;;

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

      배경색 동작되도록 수정했다고 적어놨는데요.

    • Favicon of http://starfield.tistory.com BlogIcon starfield 2009.10.22 11:41 address edit & delete

      아.. 전 위에분이 안 된다고 하시길래..;;

  15. Favicon of http://dreammer.tistory.com BlogIcon 히데오 2009.10.22 10:42 address edit & delete reply

    바꾸고 나서 안되네요. 초보라서 그런지...
    제 것도 봐주세요.

    <s_sidebar_element>
    <!--태그 구름 -->
    <div id="tagbox" class="module">
    <h4 style="padding-bottom:3px;">태그 구름</h4>
    <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",
    mode: "tags",
    distr: "true",
    tspeed: "100",
    tagcloud: document.getElementById('htags').innerHTML.E4Cumulus()
    };
    var params = {
    allowScriptAccess: "always",
    wmode: "opaque",
    bgcolor: "#f7f7f7"
    };
    swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
    //]]>
    </script>
    </div>
    </s_sidebar_element>

    그리고 카테고리를 님 처럼 바꾸는 방법하고 카테고리를 클릭했을 때 카테고리 글 모두 나오게 하는 방법도 좀 가르쳐 주세요.
    너무 많을 것을 물어보아서 죄송합니다.

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

      뭐가 어떻게 안 되는지 아무런 설명 없이 툭 던지면 도와드릴 수 없습니다.

    • Favicon of http://dreammer.tistory.com BlogIcon 히데오 2009.10.22 22:01 address edit & delete

      제가 너무 예의 없게 물어 봤습니다.

      우선 태그구름이 에러 날 땐

      Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better. 이라고 나오다가 새로 고침하면 정상적으로 돌아갑니다.

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

      캐쉬때문에 가끔 그럴 때가 있습니다.
      정상적으로 설치되었습니다.

      임시 인터넷 파일을 몽땅 지워버리면 그런 문제가 발생하지 않을 겁니다.

    • Favicon of http://dreammer.tistory.com BlogIcon 히데오 2009.10.23 07:41 address edit & delete

      캐쉬를 지우니 잘 됩니다. 감사합니다.

  16. Favicon of http://dylanko.tistory.com BlogIcon 고영혁 2009.11.30 15:02 address edit & delete reply

    1.20 버젼도 잘 쓰고 있었습니다만, 이렇게 또 업뎃해 주시다니~ 감솨감솨 !!

  17. Favicon of http://dylanko.tistory.com BlogIcon 고영혁 2009.11.30 15:08 address edit & delete reply

    아 참... 원래 cumulus에서는 태그 빈도에 따라 폰트색이 다른 것 같던데 (일반적인 태그클라우드처럼요) 1.20버젼에서는 태그가 쌓여도 색이나 볼드체 설정등이 안되는 것 같더라구요. 혹시 1.21a버젼도 그러려나요? 폰트색이 다르면 훨씬 좋을텐데... 방법이 없을지.

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

      나름 그 부분이 구현되어 있기는 합니다만, 티스토리에서 태그 구름을 만들어줄 때부터 다양한 스타일이 다 나오지는 않는 것 같습니다.
      티스토리의 원초적 한계가 아닐까합니다. ^^;

  18. Favicon of http://dylanko.tistory.com BlogIcon 고영혁 2009.11.30 15:41 address edit & delete reply

    http://www.kamiu.pe.kr/293 여기 블로그에 보면 본문에 넣는 스크립트 코드의 구조가 위에서 말씀주신 것과 다르네요. 그리고, tcolor2 라고 해서 덜 중요한 태그의 색을 지정하는 변수를 추가했고... 혹시나 해서 위에서 말씀주신 코드구조에다가 var flashvars ={ } 안에 tcolor2: "0x000000", 를 추가해 보았습니다만 덜 중요한 코드가 검은색으로 나오지는 않네요. 참고로 적은 블로그의 코드구조로 완전히 바꿔보지는 않았습니다.

    살펴보시고, 조언 부탁드립니다~~

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

      예전에 약간 버그가 있는 구성을 공개했다가 최근에 수정했습니다.
      아마 수정되기 전의 코드를 올린 것이 아닐까 합니다.

      그리고, Cumulus의 기능이 100% 구현될 수 없는 원초적 한계가 있습니다. 헐~

  19. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2010.02.25 17:55 address edit & delete reply

    티스토리가 변경되었는지
    치환자가 이상하게 작동하네요

    <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>

    <a href="" class=""> </a>
    로 해주어야 정상작동하네요 ㅠ.ㅠ

  20. Favicon of http://cantabile17.tistory.com/ BlogIcon 커피클로버 2010.04.11 21:14 address edit & delete reply

    좋은 정보 잘 보고 갑니다^^

  21. Favicon of http://millionairefree.tistory.com/ BlogIcon 하면된다 2010.05.31 21:08 address edit & delete reply

    혹시 배경의 투명화는 안되나요?
    t.addVariable("trans", "true");
    될거라 생각했는데 동작이 안되는군요
    답변 부탁드려요