이 플러그인이 얼마 전 1.21로 업데이트 되었는데, 이제야 알았다.
티스토리용 플러그인도 한글 글꼴을 사용할 수 있도록 수정하여 1.21로 업데이트 한다.
제작자인 Roy Tanck가 밝히는 수정된 내용은 아래와 같다.
= Version 1.21 =
+ Adds an option to show the regular tag cloud to non-flash users (used to be hidden through CSS).
+ The widget title is now optional.
+ Adds support for 'target' attribute to the Flash movie.
+ XML path can now be set through a flashvar.
+ Fixed markup errors in the compatibility mode.
+ Several minor fixes.
+ Adds an option to show the regular tag cloud to non-flash users (used to be hidden through CSS).
+ The widget title is now optional.
+ Adds support for 'target' attribute to the Flash movie.
+ XML path can now be set through a flashvar.
+ Fixed markup errors in the compatibility mode.
+ Several minor fixes.
그리고, 티스토리 플러그인(및 설치과정)의 수정된 내용은 아래와 같다.
- Cumulus 1.21을 기반으로 함
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)
설치과정은 아래와 같다.
1. 파일의 설치
아래 파일을 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다.
이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
TiCumulus_v121.zip
이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
TiCumulus_v121.zip엔터 튤립 9 글꼴을 이용해서 만들었다
2. 스킨 수정
우선 헤더에 아래와 같은 한 줄을 추가한다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.
다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.
이 부분을 아래와 같이 수정한다.
a. 20행의 "100%", "200"은 각각 가로, 세로의 크기이다.
b. 19행의 "#f7f7f7"는 배경의 색상이다.
c. 10행의 "0x2970A6"는 태그의 기본색상이다.
d. 11행의 "0x462A56"는 선택된 태그의 색상이다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.
<script type="text/javascript" src="./images/swfobject.js"></script>
다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾다.
<div id="tagbox" class="module">스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
<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> 밖에 있는 <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 = {};
flashvars.tcolor = "0x2970A6";
flashvars.hicolor = "0x462A56";
flashvars.mode = "tags";
flashvars.distr = "true";
flashvars.tspeed = "100";
flashvars.tagcloud = document.getElementById('htags').innerHTML.replace(/&/gi, ' ').replace(/\'/gi, ' ').replace(/%27/gi, ' ').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, "'");
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>
a. 20행의 "100%", "200"은 각각 가로, 세로의 크기이다.
b. 19행의 "#f7f7f7"는 배경의 색상이다.
c. 10행의 "0x2970A6"는 태그의 기본색상이다.
d. 11행의 "0x462A56"는 선택된 태그의 색상이다.
인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.
설치된 화면은 아래와 같다.
당연한 얘기지만... 화면은 전혀 바뀌지 않았다.
trackback from: 짜잔~ Cumulus for TiStory 공개 (버그수정)
답글삭제블로그의 구성요소 중 태그목록은 좋은 기능이긴 하지만, 미관상 그닥 예쁘지 않아 정작 쓰는 사람이 많지는 않더군요. 태그목록의 기능은 그대로 유지하면서도 보기에도 멋있는 기능을 구현한 플러그인으로 WP-Cumulus가 있습니다. WP-Cumulus 이 플러그인은 Roy Tanck라는 분이 공개한 워드 프레스용 명품 플러그인입니다. 하지만, 우리나라에서 그리고, 티스토리 환경에서 사용하기엔 한계가 있었습니다. 1. 워드 프레스 용으로 개발되어 티스토리..
우왕굿
답글삭제@페니웨이™ - 2009/07/12 21:20
답글삭제아주 약간 더 업뎃됩니다.
뒤에 인자를 붙이는 것이 좀 보기 싫고 불편해서, 우아한 쪽으로 수정하고 있습니다.
화면이 바뀌지 않으면 당연히 업데이트는 하지 않습니다 ㅋㅋㅋ
답글삭제@구차니 - 2009/07/13 09:34
답글삭제ㅋㅋ
음..블루님 블로그에도 에러 나온것처럼 보이는데요... 정상적으로 돌아간다 싶으면 업데이트 바로 해 보겠습니다^^
답글삭제@애쉬™ - 2009/07/13 11:23
답글삭제티스가 잠시 미친 척 하더니 이제 정상이 된 것 같습니다. ^^;
아직도 태그구름에 Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better. 요렇게 나오시는걸요?
답글삭제@애쉬™ - 2009/07/13 14:28
답글삭제reload 해보실래요?
FF, IE, 크롬 모두에서 잘 나오는 걸 확인했습니다.
@BLUEnLIVE - 2009/07/13 14:36
답글삭제아..^^ 리로드하니깐 되네요^^ 저도 적용해 봐야겠습니다.
엔터 튤립 9 글꼴을 이용해서 만들었습니다 란 말에 혹해서 다시 설치해봤는데...변화가 없네요^^
답글삭제아, 무조건 다시 설치한 후 F5 눌러서 리로드 하지 않으면 에러메시지 뜨는군요..
비밀 댓글 입니다.
답글삭제@Anonymous - 2009/07/15 21:26
답글삭제아래 포스트를 읽어보시기 바랍니다.
http://zoc.kr/563
수정은 나중에 끄끄
답글삭제포스팅도 나중에. 8D
클라우드 잘 사용할게요^^ 전부터 적용해봤는데 자꾸 오류 떴는데 오늘 해결하고 가네요^^
답글삭제감사합니다!!
전 어찌하여 튤립글꼴이 안나오는걸까요? ;ㅁ;
답글삭제안녕하세요^^ 태그구름 많은 도움 되었습니다. ㅎㅎ
답글삭제<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>
이 태그라인 제가 임의로 수정 했습니다. 이에 따른 자바스크립트를 불러들이는 함수도 약간 수정 했습니다.
고마워요^^
아참 WWE 좋아하시나봐요 ㅋ 저도 즐겨봐요 ㅎㅎ
'WP-Cumulus'를 활용해 볼려고 이리저리 만지다가 플래시 한글지원 이슈랑 SWFObject 버전 이슈로 고민했었는데 여기 와서 모두 해결해 버렸네요. 너무 감사드립니다. 플래시 용량이 3M에 육박하다보니 트래픽 걱정이 심하다는게 좀 아쉽네요.
답글삭제BLUEnLIVE 님의 SWF를 이용해서 태그클라우드 습작을 만들어 보고 있습니다. 해당 소스를 주변에라도 배포하게 된다면 배포 전에 허락을 받도록 하겠습니다. 일단 폰트의 용량 때문인지 SWF 크기가 너무 크다는 게 제일 이슈가 되고 있는데요. 용량 대비 효율이 좋은 폰트를 포함시킬 수는 없을런지 하는 바램이 있습니다 ^^ 수고하세요~
답글삭제배포 전에 BLUEnLive 님의 허락을 받을려고 왔습니다.
답글삭제BLUEnLive 님의 SWF를 이용한 TWC(Twitter Word Cloud)입니다.
http://twitter.trauma2u.com/twc/
SWF 트래픽은 모 포탈에서 협찬받기는 하는데 그래도 부담스럽네요.
상용폰트가 아닌 폰트 중에서는 NHN의 나눔고딕이 그나마 용량이 적어서 고려해보고 있습니다.
수고하세요.
@trauma2u - 2009/07/30 22:21
답글삭제1. 주소를 클릭했는데 반응이 없네요.
2. 배포는 상관 없습니다.
3. 여러 폰트로 시험해봤는데, 파일 크기가 대동소이하더군요. ㅠ.ㅠ
@BLUEnLIVE - 2009/07/30 22:28
답글삭제그러고보니 이전 글에 BLUEnLIVE 뒤쪽을 소문자로 썼군요 ^^ 불행하게도 영타가 익숙치 않습니다.
네임서버에 이제 막 넣어서 아직 전파가 다 안되었나 봅니다. 내일쯤엔 확인이 가능하실 듯 하구요. 말이 배포지 몇명 정도 볼까말까입니다.
나눔고딕이 2M 초반이던데 몇백K라도 줄이는데 의의를 ^^;;;;
@trauma2u - 2009/07/30 22:21
답글삭제이제 접속이 되는군요. 예쁘긴 한데, 글자가 너무 작은 것 같고, 너무 빨리 돌아 정신이 없습니다.
글자 크기 조금만 키우고 속도를 조금만 낮추면 좋을 것 같습니다.
@BLUEnLIVE - 2009/07/30 22:56
답글삭제속도가 현재 100으로 설정되어 있습니다. 80 정도로 내릴 생각이고 0.3(?) 정도엔 직접 설정할 수 있도록 할까 하구요.
글자가 너무 작은 이유는 제가 태그 클라우드의 기제를 정확하게 파악하지 못하다 보니, 워드의 갯수를 그대로 스타일로 설정해 버립니다. 즉 한번 나온 워드는 크기가 1이 되어버립니다. 두번 나오면 2, 세번 나오면 3 이렇게 되지요. BLUEnLIVE 님의 경우 워드 갯수가 워낙 적다보니 모든 글자가 작게 나오네요. 트윗 수가 200개가 넘어가면 적당한 크기로 나오기는 하는데, 워드 갯수의 최대값과 최소값을 고려해서 적절하게 글자 크기를 설정해 주는 방식이 필요하다는 생각은 해봅니다. 머리가 돌이 되어서인지 잘 떠오르지 않네요. 티스토리에서 적용해 보셨으니까 조언을 좀 해주시면 감사드리겠습니다.
@trauma2u - 2009/07/30 22:21
답글삭제티스토리에 적용할 땐 스타일에 미리 지정되어있는 속성을 그대로 적용했습니다.
그래서 글자 크기에 대해선 큰 고민을 안 했습니다.
TWC에선 갯수를 크기로 지정하기 보단 갯수의 분포 비율을 크기로 변환하는 것이 어떨까하는 생각이 듭니다.
@BLUEnLIVE - 2009/07/30 23:41
답글삭제조언 감사드립니다. 결국 텍스트큐브 소스를 찾아서 보게 되는군요. 텍스트큐브의 경우 기본크기와 기본크기*2 사이를 다섯단계로 나눠서 표시하는군요. 웹의 한계상 어쩔수 없는 부분인 듯 한데, 플래시의 경우 5단계는 너무 적은 듯한 기분이 드네요. 좀더 고민을 해보겠습니다.
도와주신 덕분에 주변에 그냥 오픈했습니다. 시간을 두고 손을 봐야겠지요.
답글삭제글자크기는 가중치 개념을 조금 추가했습니다. BLUEnLIVE 님 계정으로 테스트 해보면서 ^^
감사드립니다. 트위터에서 뵙겠습니다.
@trauma2u - 2009/07/31 16:27
답글삭제멋지구리합니다. 정말 잘 만드셨네요. ^^;
정말 수고 많으셨습니다!
답글삭제그런데 정작 오리지널 워프에선 한글지원이 안되는 것 같던데
워프용으로도 하나 만들어주시면 안될까요? 아니면 적용법이 있습니까??
@D.A. - 2009/08/06 22:45
답글삭제제가 워프를 안 쓰기 때문에 뾰족한 답을 드리긴 어렵군요.
@BLUEnLIVE - 2009/08/06 22:54
답글삭제그..그렇군요!
워프 플러그인이랑 테마가 보이길래 워프 유저신줄 알았네요 ^^;
trackback from: 플래쉬 태그목록 Cumulus for Tistory 버그수정
답글삭제BLUEnLIVE님이 공개 해주신 플래쉬 tag cloud인 Cumulus for Tistory로 태그목록을 잘 사용하던 중 버그가 있는 걸 발견했다. lightbox를 이용해서 이미지를 보여주면 플래쉬가 라이트박스 이미지 위에 오버랩 버리는 문제가 있는 것이다. embed 태그는 속성 중 wmode라는 것이 있습니다. 이놈의 값은 다음과 같습니다.(출처: THLIFE.net) window : 기본값으로 모든 html 엘리먼트 위로 flash 가 나..
lightbox로 이미지 볼때 태그 목록이 이미지 위로 오버랩되는 문제가 있어 스크립트 수정을 조금 했습니다. 트랙백 걸었어요. 이거하다가 버전 업그레이드 된거 알았네요. ^^;
답글삭제잘 쓰겠습니다.
아 스킨도 iNove로 전환했답니다. ㅋㅋㅋ
@금봉이 - 2009/09/12 00:58
답글삭제오홋! 고맙습니다. 당장 수정해야겠군요.
안녕하세요. 잘 적용해서 멋지게 잘 사용 하고있습니다. 한가지 질문드릴께 있어서요. 다름이 아니라 태그 배경 컬러를 아무리 바꿔도 적용이 안되더라구요. 그래서 상세설명을 위해 링크 해 두신 홈페이지를 가서 보니 "trans"라는 값이 있던데 이것을 true나 false값을 적용해야지 될듯 하더군요. 그래서 위에 적어두신 클라우드 태그를 봤는데 아무리 봐도 "trans"값을 찾을 수 없었습니다. 혹시 뒷배경 적용이 불가능한건 아닌가 싶어 질문을 드립니다. 그럼 수고하세요~^^
답글삭제