2009년 8월 8일 토요일

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://zoc.kr">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)

댓글 47개:

  1. 늘 고마운 마음입니다. 잘 사용할께요. :)

    사실 어제 1.21로 업했는데요... --;

    답글삭제
  2. @깊은숲 - 2009/08/08 18:40
    그럼 잽싸게 업뎃하시는 겁니다. ㅎㅎ

    답글삭제
  3. @깊은숲 - 2009/08/08 18:40
    그런데, 태그를 클릭해도 제대로 동작하지 않는군요. 뭔가 오류가 있는 것 같습니다.

    답글삭제
  4. 이제는 다국어만 남은건가요? ^^;;

    답글삭제
  5. @하얀별 - 2009/08/08 22:49
    그건 용량 문제 때문에 전혀 생각이 없습니다. ㅎㅎㅎ

    답글삭제
  6. 원래 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="[##_title_##]" href="[##_rss_url_##]" />

    <!-- 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="[##_blog_link_##]favicon.ico" />

    <!-- pageTitle -->

    <title>[##_title_##] <s_page_title> :: [##_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&g..

    답글삭제
  7. @스트링 - 2009/08/11 13:36
    잘 되는데요

    답글삭제
  8. @BLUEnLIVE - 2009/08/11 17:32
    조금 지나니가 잘 되네요.

    제가 너무 성급했네요.ㅋㅋ

    답글삭제
  9. 제 블로그에 태그 클라우드를 적용해봤는데,

    그냥 하얗게만 나옵니다. 왜 그럴까요?

    도움이 필요합니다. -ㅅ-

    답글삭제
  10. @doodrim - 2009/08/14 12:11
    스킨 편집이 잘못되었군요.

    열심히 해보시란 말 밖엔 드릴 말이 없습니다.

    답글삭제
  11. @BLUEnLIVE - 2009/08/14 13:00
    열심히 해보았답니다..ㅠㅠ

    소스 한번 봐주실래요?



    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />

    <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="[##_blog_link_##]favicon.ico" />

    <title>[##_title_##] :: [##_page_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="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a></li>

    </s_random_tags>



    </ul> -->

    <!-- Tag Cloud Start -->

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

    //<![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>

    답글삭제
  12. @doodrim - 2009/08/14 12:11
    <ul>-</ul>을 안 지우고 주석으로 묶었군요.

    답글삭제
  13. @BLUEnLIVE - 2009/08/14 19:17
    주석으로 묶으면 안되는거였군요.. 감사합니다 (_ _);

    답글삭제
  14. 감사합니다. 잘되네요.

    폰트가 조금 아쉬운 것 말고는 좋네요...ㅎㅎ;

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



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

    답글삭제
  16. @우주곰 - 2009/09/02 13:57
    아직 텍큐닷컴은 기능들이 안정화되지 않아 손이 많이 가는 것 같습니다.

    W3C에서도 js는 가급적 <head> 안에 두는 것을 원칙으로 하는데... 쩝쩝쩝.



    수고 많으셨습니다.

    답글삭제
  17. 아,, 이거 한글만 지원되는건가요??

    답글삭제
  18. @센쇼 - 2009/09/06 11:57
    한글+영어 외엔 지원되지 않습니다.

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

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



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

    답글삭제
  21. @엘카 - 2009/09/23 09:10
    잘 쓰시기 바랍니다.

    답글삭제
  22. @天上不非 - 2009/09/23 20:14
    가보니 글이 하나도 없는데, 태그는 많네요.

    아마도 작성중인 글에 달린 태그인 듯...



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

    답글삭제
  23. 태그클라우드 감사히 쓰고 있습니다.

    그런데 태그숫자는 어떻게 줄이나요?

    태그가 많아서 어지러워 보이네요... :x

    답글삭제
  24. @엘카 - 2009/09/26 07:41
    티스토리 설정에서 조절할 수 있습니다.

    답글삭제
  25. 태그 구름을 찾았었는데..필넷님의 안내로 방문하게되었습니다.

    너무 고맙습니다. 이쁜 태그구름 사용..넘 좋아요

    답글삭제
  26. 태그구름 넘 이쁘네여

    잘 사용하겠습니다.

    답글삭제
  27. 이거 배경색 수정은 정녕 안되는 건가요??

    명려어가 안먹히면

    기폰 플래시 파일의 배경색을 바꿔서 업로드 시키면 될것 같은데

    FLV 파일이 없으니 수정도 안되고;;;

    쓸수가 없네요..

    답글삭제
  28. @Good_Speed - 2009/10/10 17:58
    IE에서는 배경색이 먹지 않더군요. IE의 버그는 MS로...

    답글삭제
  29. 이번에도 좋은거 얻어갑니다.

    그런데 전 배경색 수정이 되는데요?



    블로그 전체 폰트가 맑은 고딕이라

    폰트에 약간의 아쉬움이 있긴 함..;;

    답글삭제
  30. @starfield - 2009/10/21 19:45
    배경색 동작되도록 수정했다고 적어놨는데요.

    답글삭제
  31. 바꾸고 나서 안되네요. 초보라서 그런지...

    제 것도 봐주세요.



    <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="[##_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">

    //<![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>



    그리고 카테고리를 님 처럼 바꾸는 방법하고 카테고리를 클릭했을 때 카테고리 글 모두 나오게 하는 방법도 좀 가르쳐 주세요.

    너무 많을 것을 물어보아서 죄송합니다.

    답글삭제
  32. @BLUEnLIVE - 2009/10/21 21:23
    아.. 전 위에분이 안 된다고 하시길래..;;

    답글삭제
  33. @히데오 - 2009/10/22 10:42
    뭐가 어떻게 안 되는지 아무런 설명 없이 툭 던지면 도와드릴 수 없습니다.

    답글삭제
  34. @BLUEnLIVE - 2009/10/22 19:16
    제가 너무 예의 없게 물어 봤습니다.



    우선 태그구름이 에러 날 땐



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

    답글삭제
  35. @히데오 - 2009/10/22 10:42
    캐쉬때문에 가끔 그럴 때가 있습니다.

    정상적으로 설치되었습니다.



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

    답글삭제
  36. @BLUEnLIVE - 2009/10/22 23:06
    캐쉬를 지우니 잘 됩니다. 감사합니다.

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

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

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



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

    답글삭제
  40. @고영혁 - 2009/11/30 15:41
    예전에 약간 버그가 있는 구성을 공개했다가 최근에 수정했습니다.

    아마 수정되기 전의 코드를 올린 것이 아닐까 합니다.



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

    답글삭제
  41. @고영혁 - 2009/11/30 15:08
    나름 그 부분이 구현되어 있기는 합니다만, 티스토리에서 태그 구름을 만들어줄 때부터 다양한 스타일이 다 나오지는 않는 것 같습니다.

    티스토리의 원초적 한계가 아닐까합니다. ^^;

    답글삭제
  42. trackback from: 홈페이지 꾸미기 완료 - RSS구독, 공유도구, 트위터연동, 이동메뉴
    지난 주말동안 짬을 내서 홈페이지를 대대적으로 개편했다. 2009.08.06 에 티스토리 블로그로 홈페이지를 오픈한 이후 실질적으로는 두 번째 개편인셈이다. 첫번째 개편에서는 기본적인 의사소통 및 브랜딩 도구를 설치했고, 한참 SNS를 따라잡던 터라 SNS 와의 기본 연결고리를 만들었었다. - 링크나우 프로필 버튼 : 사이드바 설정의 이미지배너 출력 사용 - 믹시, 다음 뷰 등의 메타블로그 위젯 : 각 메타블로그 사이트가 제공하는 위젯 사용 - 멋진..

    답글삭제
  43. 티스토리가 변경되었는지

    치환자가 이상하게 작동하네요



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



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

    로 해주어야 정상작동하네요 ㅠ.ㅠ

    답글삭제
  44. 혹시 배경의 투명화는 안되나요?

    t.addVariable("trans", "true");

    될거라 생각했는데 동작이 안되는군요

    답변 부탁드려요

    답글삭제