태그클라우드로 반응형 웹스킨 적용된 티스토리 블로그 꾸미기
태그구름(태그클라우드: Tag cloud)는 블로그의 메타 데이터에서 얻어진 태그(tag)를 분석한 뒤에 인기도나 빈도를 고려해서 시각적으로 비주얼하게 동적으로 움직이도록 구성된 플러그인의 일종이다.
티스토리 자체에서 플러그인으로 태그 클라우드를 제공하기는 하지만 비주얼적으로 좀 떨어진다.
이 태그 클라우드 플러그인은 직접 설치해야 하는데, 첨부된 파일에서 압축을 풀어서 html/css 메뉴에서 파일업로드를 통해 업로드한다.
순서대로 따라하면 손쉽게 설치가 가능하다.tagcloud.zip0.37MB
압축된 파일을 풀면 swfobject.js, tagcloud.swf, script.txt의 세개 파일이 생성된다.
1. swfobject.js, tagcloud.swf 이 두 개의 파일을 HTML/CSS 편집 메뉴의 파일업로드 탭에서 업로드한다.
2. HTML/CSS편집창에서 skin.html의 소스코드를 수정한다.
Ctrl+F로 ‘s_random_tags’를 찾아서 그림의 빨간색 박스 부분의 html 태그를 script.txt 파일의 내용으로 교체한다.
필자는 일단 기존 태그를 주석 처리하고 script.txt의 내용을 추가해주었다.
Tistory Cumulus Flash tag cloud by
BLUEnLIVE
requires Flash Player 9 or better.
3. skin.html의 수정이 다 되면, 블로그의 사이드바가 다음과 같이 적용된다.
조금 더 스크립트 코드를 디테일하게 적용하고 싶다면 http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/를 방문하면된다.
태그클라우드의 스타일을 설정하려면 다음의 파라미터 값들을 조정하면 된다.
| Name | Format | Description |
| mode | String: tags|cats|both | Tells the movie to expect and display tags, categories or both. |
| distr | String: true|false | If set to true, the tags are distributed evenly over the sphere’s surface. |
| tcolor | Hex color value: 0xff0000 for red. | The default tag color |
| tcolor2 | Hex color value | Second tag color. If supplied, tags will get a color from a gradient between both colors based on their popularity. |
| hicolor | Hex color value | Tag mouseover/hover color |
| tspeed | Number: percentage | Determines the speed of the sphere’s rotation. The default is 100, higher numbers increase the speed. |
| tagcloud | XML string (urlencoding optional) | The tag cloud, XML format described above. |
| xmlpath | Path to load the XML |