Sense Wide
article thumbnail


 검색될 확률을 높여주고 블로그의 내용을 확인할 수 있는 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(/&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>


 첫번째 밑줄친 부분이 새로운 개체를 생성하는 부분인데, 100%200%가 각각 가로, 세로크기고 #ffffff는 배경의 색상이다.


 구체적인 속성을 변경하기 위해서는 두번째 밑줄 친 부분처럼 인자를 지정해줘야한다.

 인자는 다음과 같은 꼴로 지정할 수 있다.


 t.addVariable("인자명","인자값");


 단, 숫자를 입력할 때 앞에 0x를 적어서 진법표시를 해줘야한다.

 변경할 수 있는 인자는 다음과 같다.

Supported attributes

Here is a complete list of the attributes WP-Cumulus currently supports:

인자명

용도

Possible values예시
widthWidth of the tag cloudNumber of pixels (positive integer)width=”300″
heightHeight of the tag cloudNumber of pixels (positive integer)height=”240″
tcolorTag colorHEX color value without the ‘#’ prefixtcolor=”ffcc00″
tcolor2Tag color for less important tagsHEX color value without the ‘#’ prefixtcolor2=”cc9900″
hicolorTag highlight colorHEX color value without the ‘#’ prefixhicolor=”ffffff”
bgcolorTag cloud background colorHEX color value without the ‘#’ prefixbgcolor=”333333″
speedRotation speedPrecentage, higher means fasterspeed=”150″
transBackground transparency“true” or “false”trans=”true”
distrEven tag distributions along sphere“true” or “false”distr=”true”
argsArgments to be passed to the ‘wp_tag_cloud’ function (experimental, use at own risk)URL encoded stringargs=”smallest=10″
modeTag/Category mode“tags”, “cats” or “both”mode=”tags”


 예를 들어 전체적으로 파란색 분위기를 내고싶다면

 t.addVariable("tcolor", "0x222222");  부분을 다음과 같이 수정하고

 t.addVariable("tcolor", "0x517293"); 

 아래 코드를 추가해주면 된다.

 t.addVariable("hicolor", "0x3c3a5e");


profile

Sense Wide

@June_Kim

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!