태그 클라우드, 플래시로 표현되는 3D 태그 클라우드 적용 및 설정법

태그 클라우드 플래시를 설치하는 방법에 대해 알려드립니다. 제 블로그 오른쪽 사이드바에 플래시로 빙글빙글 돌아가는 태그 클라우드 보이시나요? 바로 저것을 티스토리에 추가해 보겠습니다. 약간 응용하시면 웹싸이트에도 문제없을거 같네요. 방법은 아주 간단합니다~자, 태그 클라우드 설치 시작~

태그 클라우드 소스파일 다운로드 및 업로드

먼저 태그 클라우드를 위한 소스파일을 다운로드 받으세요.

TiCumulus.zip

압축을 열어보면, 3개의 파일이 있는데요. swfobject.js 와 tagcloud.swf 2개의 파일을 티스토리 관리 > HTML/CSS편집 > 파일업로드를 선택하여 업로드해줍니다.

태그 클라우드를 위한 skin.html 편집

HTML/CSS 편집화면으로 돌아와서 <s_random_tags>를 검색하여 찾습니다.
압축을 푼 파일중에 script.txt 파일을 열어서 빨간색 영역의 코드<ul>~</ul>영역를 삭제합니다.
삭제한 위치에 script.txt 태그 클라우드의 소스 내용을 붙여넣기 한 다음 스킨편집화면을 저장하고 빠져나오세요.
참고 : skin.html의 태그코드 위치는 스킨마다 조금 다를 수 있습니다.

 

태그 클라우드의 편집 및 설정법

태그 클라우드가 사이드바에서 정상적으로 작동하는 모습을 볼 수 있을건데요, 클라우드의 크기와 글씨 색상 그리고 태그가 움직이는 속도를 조절하는 방법을 설명드릴께요. 

var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");

100% : 태그 클라우드 가로크기
200 : 태그 클라우드 세로크기
#ffffff : 태그 클라우드 배경색
 

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

태그 클라우드의 글씨색
 

t.addVariable("tcolor2", "0xee95b4");

빈도수가 높은 태그의 글씨색
 

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

태그클라우드에 마우스 오버될때 태그의 글씨색

t.addVariable("tspeed", "150"); 

태그 클라우드의 회전속도, 숫자가 높을수록 회전속도가 빠릅니다.

참고 : 색상수정할때 #~로 표현되는 부분에서 # 대신 0x를 넣으면 됩니다.
 
플래시로 표현하는 태그 클라우드~ 참 쉽죠?
색상추출기 첨부할께요 유용하게 사용하세요. 도움이 좀 되셨나요 ^^?

ColorCop.exe

고도를 기다리며 zenith5.tistory.com by 킥스

<관련글>

2011/11/22 - [Blog] - 나눔폰트를 블로그(티스토리)에 적용해보자
2011/12/05 - [Blog] - 블로그 소스코드 가독성, 에디트 플러스(EditPlus)에서 한방에 해결하자
2011/12/06 - [Blog] - 무료폰트, 롯데마트 통큰폰트 배포합니다.