Cumulus for Tistory 1.21 업데이트!

Cumulus for TiStory 공개을 통해 Cumulus 플러그인 1.20의 티스토리 버전을 공개했었다.

이 플러그인이 얼마 전 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.


그리고, 티스토리 플러그인(및 설치과정)의 수정된 내용은 아래와 같다.

- Cumulus 1.21을 기반으로 함
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)


설치과정은 아래와 같다.

1. 파일의 설치

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

TiCumulus_v121.zip

엔터 튤립 9 글꼴을 이용해서 만들었다



2. 스킨 수정

우선 헤더에 아래와 같은 한 줄을 추가한다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.

<script type="text/javascript" src="./images/swfobject.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 = {};
  flashvars.tcolor = "0x2970A6";
  flashvars.hicolor = "0x462A56";
  flashvars.mode = "tags";
  flashvars.distr = "true";
  flashvars.tspeed = "100";
  flashvars.tagcloud = document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/\'/gi, ' ').replace(/%27/gi, ' ').replace(/&quot;/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"는 선택된 태그의 색상이다.


인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.
설치된 화면은 아래와 같다.

사용자 삽입 이미지

당연한 얘기지만... 화면은 전혀 바뀌지 않았다.


'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글

블로그에 트윗 설치 완료!  (12) 2009.07.28
티스토리에서 악플러의 IP 차단하는 방법  (15) 2009.07.17
JW Player 도우미 플러그인 1.2 업데이트  (3) 2009.07.12
iNove 스킨 버그(?) 3가지 수정 (내용 추가)  (6) 2009.06.18
javascript에서 js 파일 자체의 파일명을 알애내는 방법  (2) 2009.06.12

티스토리툴바