짜잔~ Cumulus for TiStory 공개 (버그수정)

블로그의 구성요소 중 태그목록은 좋은 기능이긴 하지만, 미관상 그닥 예쁘지 않아 정작 쓰는 사람이 많지는 않다.
태그목록의 기능은 그대로 유지하면서도 보기에도 멋있는 기능을 구현한 플러그인으로 WP-Cumulus가 있다.

사용자 삽입 이미지

WP-Cumulus


이 플러그인은 Roy Tanck라는 분이 공개한 워드 프레스용 명품 플러그인이다.
하지만, 우리나라에서 그리고, 티스토리 환경에서 사용하기엔 한계가 있었다.

1. 워드 프레스 용으로 개발되어 티스토리 환경에서는 많은 변형이 필요함
2. 글꼴이 swf 파일에 포함되어있는데, 영문 글꼴만 포함되어 있음

이 두 가지 한계를 극복한 티스토리용 Cumulus를 공개한다.

사용자 삽입 이미지

짜잔~ Ti-Cumulus


설치과정은 아래와 같다.


1. 파일의 설치

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



2. 스킨 수정

스킨을 직접 편집해서 아래와 같은 내용을 찾는다.
<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>이다.

이 부분을 아래와 같이 수정한다. (& 출력 버그 수정: 2009. 5. 22)
<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" 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(/&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>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.
9행의 "100%", "200"은 각각 가로, 세로의 크기이다. 그리고, "#ffffff"배경의 색상이다.
(정식 플러그인이 아니라 비주얼한 설정은 불가능함. ㅠ.ㅠ)

그리고, 10행의 "0x222222"태그의 기본색상이다.


덧1. 인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.

덧2. mepay님. 코드가 약간 수정되었습니다. 해당되는 부분을 찾아 똑같이 수정하시기 바랍니다.

덧3. rezlog에 텍스트큐브용 Cumulus가 공개되었지만, 설치형에서의 용량의 압박때문에 anti-aliasing이 안 되도록 만들어졌다. Ti-Cumulus는 가입형 티스토리의 장점을 십분 활용해서 anti-aliasing기 적용된 미려한 모습을 보여준다.

덧4. 태그 중에 &(amp)가 들어가면 태그가 표시되지 않는 버그가 있었다.
태그 중에 &가 있으면 공백으로 대치하도록 수정했다. (2009. 5. 22)


Trackback 13 Comment 181
  1. 이전 댓글 더보기
  2. Favicon of http://bybini.tistory.com BlogIcon 비니쓴법사 2009.06.30 15:29 address edit & delete reply

    잘 보고 갑니다.
    적용하니, 너무 맘에 드네요.
    좋은 하루 되세요.

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

      잘 쓰시기 바랍니다. ^^;

  3. Favicon of http://nalrari.tistory.com BlogIcon 날라리 2009.07.01 21:31 address edit & delete reply

    적용해서 잘 쓰고 있읍니다.고맙습니다.[emo=104]

  4. Favicon of http://shojogeba.tistory.com/ BlogIcon 뎡야핑 2009.07.15 16:25 address edit & delete reply

    우와아 워드프레스에서 보고 너무 멋있다고 완전 부러워했는데+_+ 와아~~~~ 쉬운 설명도 너무 감사드립니다. 나중에 다른 불로그에도 적용해 보게, 글도 링크해 갈게요. 너무 완전 훌륭하세요!!! 와아~~~!!!!
    (훗 이모티콘이 너무 귀여워서 함 써봅니다-ㅁ-;;)

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

      1.21로 업데이트되었습니다.
      아래 링크를 참조하시기 바랍니다.
      http://zockr.tistory.com/621

  5. Favicon of http://spikaandregulus.tistory.com/ BlogIcon spika 2009.07.29 18:29 address edit & delete reply

    안녕하세요 티스토리 블로그 만든지 얼마안된 초보예요;
    여러갖 유용한 정보 잘봤어요~~//ㅅ//
    제가 구름태그를 HTML에설정되서 출력되긴하는데..
    오른쪽 사이드바에 가지런히 있는게 아니라 왼쪽 사이드바 맨위애 어중간하개 설치가되었어요 ㅜㅜ 캐그애 익숙치 않아서 어떻게옮겨야할지;;염치없지만 구름 태그를 안정시키는(;;)방법 알려주세요~~ ㅠㅠ
    아래는 제가설정한 태그입니다;ㅅ;
    <h3>Tags<span>&#187;</span></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" 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://www.dg-son.com BlogIcon 웹톨이 2009.09.30 11:31 address edit & delete reply

    님 덕분에 저도 성공했습니다. 구름태그를 구하려고 여기저기 돌아다녔는데 다들 잘 모르시더라구요...그런데 이곳에서 알아냈군요...ㅋㅋ

  7. Favicon of http://orange-lemon.tistory.com BlogIcon 오렌지레몬 2009.10.06 20:48 address edit & delete reply

    덕분에 멋진 태그목록 달았어요!

    감사!ㅎㅎ

  8. Favicon of http://twinklesh.tstory.com BlogIcon 쿨쿠리 2009.10.07 17:45 address edit & delete reply

    티스토리에 첫발 디디고, 님 블로그 통해 많은 정보 얻었습니다.
    고맙습니다. ^^

  9. Favicon of http://jeeraenge.tistory.com BlogIcon 지랭이 2009.10.15 15:30 address edit & delete reply

    좀 시간이 걸렸지만, 해냈습니다^^
    감사합니다!

  10. Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 2009.10.20 10:47 address edit & delete reply

    잘 적용했습니다. 좋은 정보 감사합니다.

  11. Favicon of http://ione2u.tistory.com BlogIcon 사짜 2010.02.24 19:52 address edit & delete reply

    잘 보고 따라했어요.
    쉽게 설명해주셨네요. 감사해요 ^-^)/

  12. Favicon of http://barring.tistory.com/ BlogIcon RoseBarring 2010.03.25 22:46 address edit & delete reply

    못할 줄 알았는데 열심히 따라했더니 되네요!! >ㅁ<

    잘쓸게요 감사합니다~~!!

  13. 김유진 2010.04.21 05:15 address edit & delete reply

    감사합니다~ ^^

  14. Favicon of http://sacrificio.tistory.com BlogIcon sacrificio 2010.05.09 12:07 address edit & delete reply

    저 배경색을 투명으로 바꾸는 방법좀 알려주세요 ㅠㅠ

  15. 배우자 2010.05.18 08:37 address edit & delete reply

    티스토리 외에 일반 도메인이 연결된 홈페이지에는 적용 못하나요?

  16. 2010.06.13 03:22 address edit & delete reply

    비밀댓글입니다

  17. Favicon of http://mydascap.tistory.com BlogIcon 마이다스의 세상 2010.07.27 22:59 address edit & delete reply

    와.. 어려울 줄 알았는데 생각보다 간단하네요^^ 덕분에 좋은거 달았어요 ㅋㅋ 항상 탐내던 것인데 ㅋㅋ

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

      잘 쓰세요. ^^;

  18. tomato 2010.07.28 18:31 address edit & delete reply

    유용히 잘 쓰고 있습니다. 감사합니다. 그런데 & 표시 버그가 있었다가 수정하셨다고 했는데요. 어퍼스트로피 에스(')가 들어간 경우도 태그구름이 안 나오게 되는 버그가 있는 것 같습니다. 저희 블로그에 올렸다가 안 나와서 그 글자 빼니까 나오더라구요^^;

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

      새 버전에선 수정했습니다만, 제가 티스토리를 사용하지 않기 때문에 티스토리용 패치는 따로 공개하지 않았습니다.

  19. Favicon of http://heartinpiece.tistory.com BlogIcon Heartinpiece 2010.09.13 11:00 address edit & delete reply

    WP Cumulus 잘 받아갑니다^^
    진짜 금방 적용했네요^^
    너무 마음에 들어요^:D

  20. Favicon of http://blogblogger.tistory.com BlogIcon minisoda 2010.09.23 15:00 address edit & delete reply

    드이어 찾았네요

  21. Favicon of http://instories.tistory.com BlogIcon 우주 2011.07.03 19:53 address edit & delete reply

    티스토리 치환자 문제로 서핑하다 우연히 님의 블로그에 오게 되었는데, 전부터 궁금했던 어려운 문제를
    여기에 와서 해답을 찾았습니다.
    감사 말씀 드립니다....
    블로그 이웃으로 지정해 놓고 자주와서 배워야겠습니다.
    그런데 BLUEnLIVE님 적용은 100% 되었는데 마우스 올렸을때 hover color가 검게 나오는데 다른 칼라로
    바꿀수 있는 방법이 있으면 알려 주세요
    스크립트 소스를 아무리 뒤져도 그에대한 소스는 보이지가 않습니다.
    다시한번 감사합니다...잘 쓰겠습니다^^

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

      업데이트된 포스트를 읽어보시기 바랍니다.

      http://zockr.tistory.com/998