검색될 확률을 높여주고 블로그의 내용을 확인할 수 있는 Tag! 하지만 그냥 나열되있는 평범한 Tag cloud는 싫어! 블로그를 돌아다니면서 어디선가 본듯한 3D flash tag cloud를 소개하고자 한다.
원래 Cumulus는 Roy Tanck라는 한 외국분께서 개발한 플러그인이지만 Tistory용으로 수정된 플러그인이 공개되었다.
내 블로그에서 돌아가고 있는 Cumulus. 이쁘네
먼저 다음의 파일을 받자.
Cumulus Tistory.zip압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 있다.
이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
이제 여러분이 싫어하는 HTML/CSS 수정시간(나도 귀찮음)
1. HTML/CSS 편집으로 들어간다.
2. Ctrl + F 로 s_random을 검색해 다음과 같은 구간을 찾는다. // <!--태그 구름--> (없으면 <!--tag--> 라던지 비슷한부분)
3. 스킨마다 다를 수 있으나 기본적으로 <ul>~</ul>사이에 s_random 태그가 있다. ul 코드가 없다면 위 그림과 같이 만들어준다.
4-1. <ul>과 <s_random_tags> 사이에 다음 줄을 넣어준다.
<div id="htags" style="display:none;"><tags>
4-2. </s_random_tag>와 </ul> 사이에 다음 줄을 넣어준다. (복붙!!)
<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>
첫번째 밑줄친 부분이 새로운 개체를 생성하는 부분인데, 100%와 200%가 각각 가로, 세로크기고 #ffffff는 배경의 색상이다.
구체적인 속성을 변경하기 위해서는 두번째 밑줄 친 부분처럼 인자를 지정해줘야한다.
인자는 다음과 같은 꼴로 지정할 수 있다.
t.addVariable("인자명","인자값");
단, 숫자를 입력할 때 앞에 0x를 적어서 진법표시를 해줘야한다.
변경할 수 있는 인자는 다음과 같다.
Supported attributes
Here is a complete list of the attributes WP-Cumulus currently supports:
| 인자명 | 용도 | Possible values | 예시 |
|---|---|---|---|
| width | Width of the tag cloud | Number of pixels (positive integer) | width=”300″ |
| height | Height of the tag cloud | Number of pixels (positive integer) | height=”240″ |
| tcolor | Tag color | HEX color value without the ‘#’ prefix | tcolor=”ffcc00″ |
| tcolor2 | Tag color for less important tags | HEX color value without the ‘#’ prefix | tcolor2=”cc9900″ |
| hicolor | Tag highlight color | HEX color value without the ‘#’ prefix | hicolor=”ffffff” |
| bgcolor | Tag cloud background color | HEX color value without the ‘#’ prefix | bgcolor=”333333″ |
| speed | Rotation speed | Precentage, higher means faster | speed=”150″ |
| trans | Background transparency | “true” or “false” | trans=”true” |
| distr | Even tag distributions along sphere | “true” or “false” | distr=”true” |
| args | Argments to be passed to the ‘wp_tag_cloud’ function (experimental, use at own risk) | URL encoded string | args=”smallest=10″ |
| mode | Tag/Category mode | “tags”, “cats” or “both” | mode=”tags” |
예를 들어 전체적으로 파란색 분위기를 내고싶다면
t.addVariable("tcolor", "0x222222"); 부분을 다음과 같이 수정하고
t.addVariable("tcolor", "0x517293");
아래 코드를 추가해주면 된다.
t.addVariable("hicolor", "0x3c3a5e");
