- 짜잔~ Cumulus for TiStory 공개 (버그수정)
- 컴퓨터야그/블로그 관련
- 2009. 5. 21. 23:23
- cumulus, it, 블로그, 태그, 티스토리
태그목록의 기능은 그대로 유지하면서도 보기에도 멋있는 기능을 구현한 플러그인으로 WP-Cumulus가 있다.

WP-Cumulus
이 플러그인은 Roy Tanck라는 분이 공개한 워드 프레스용 명품 플러그인이다.
하지만, 우리나라에서 그리고, 티스토리 환경에서 사용하기엔 한계가 있었다.
2. 글꼴이 swf 파일에 포함되어있는데, 영문 글꼴만 포함되어 있음
이 두 가지 한계를 극복한 티스토리용 Cumulus를 공개한다.

짜잔~ Ti-Cumulus
설치과정은 아래와 같다.
1. 파일의 설치
이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
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>스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
</div>
우선 수정해야하는 부분은 이 <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(/&/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)
'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글
예쁜 제목줄 만들기 (21) | 2009.05.24 |
---|---|
카테고리의 마우스 커서가 제대로 나오지 않을 때 수정방법 (2) | 2009.05.24 |
짜잔~ Cumulus for TiStory 공개 (버그수정) (181) | 2009.05.21 |
BBCode for TiStory 3.0 업데이트 (36) | 2009.05.19 |
iNove 스킨 수정: IE6에서도 정상적으로 나오도록 수정 (7) | 2009.05.18 |
Forevler님의 양파군 이모티콘 업그레이드 적용! (10) | 2009.05.17 |
- 이전 댓글 더보기
-
-
-
뎡야핑 2009.07.15 16:25
우와아 워드프레스에서 보고 너무 멋있다고 완전 부러워했는데+_+ 와아~~~~ 쉬운 설명도 너무 감사드립니다. 나중에 다른 불로그에도 적용해 보게, 글도 링크해 갈게요. 너무 완전 훌륭하세요!!! 와아~~~!!!!
(훗 이모티콘이 너무 귀여워서 함 써봅니다-ㅁ-;;) -
spika 2009.07.29 18:29
안녕하세요 티스토리 블로그 만든지 얼마안된 초보예요;
여러갖 유용한 정보 잘봤어요~~//ㅅ//
제가 구름태그를 HTML에설정되서 출력되긴하는데..
오른쪽 사이드바에 가지런히 있는게 아니라 왼쪽 사이드바 맨위애 어중간하개 설치가되었어요 ㅜㅜ 캐그애 익숙치 않아서 어떻게옮겨야할지;;염치없지만 구름 태그를 안정시키는(;;)방법 알려주세요~~ ㅠㅠ
아래는 제가설정한 태그입니다;ㅅ;
<h3>Tags<span>»</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> -
-
tomato 2010.07.28 18:31
유용히 잘 쓰고 있습니다. 감사합니다. 그런데 & 표시 버그가 있었다가 수정하셨다고 했는데요. 어퍼스트로피 에스(')가 들어간 경우도 태그구름이 안 나오게 되는 버그가 있는 것 같습니다. 저희 블로그에 올렸다가 안 나와서 그 글자 빼니까 나오더라구요^^;
-
우주 2011.07.03 19:53
티스토리 치환자 문제로 서핑하다 우연히 님의 블로그에 오게 되었는데, 전부터 궁금했던 어려운 문제를
여기에 와서 해답을 찾았습니다.
감사 말씀 드립니다....
블로그 이웃으로 지정해 놓고 자주와서 배워야겠습니다.
그런데 BLUEnLIVE님 적용은 100% 되었는데 마우스 올렸을때 hover color가 검게 나오는데 다른 칼라로
바꿀수 있는 방법이 있으면 알려 주세요
스크립트 소스를 아무리 뒤져도 그에대한 소스는 보이지가 않습니다.
다시한번 감사합니다...잘 쓰겠습니다^^
Recent comment