반응형웹 스킨 적용된 티스토리에 태그 클라우드 적용하기

태그클라우드(Tag cloud태그구름)는 블로그의 접속데이터 중에서 검색태그(tag)를 분석해서인기도나 빈도를 고려해 시각적으로 동적으로 움직이도록 만들어진 플러그인의 일종이다.

티스토리 자체에서 플러그인으로 태그 클라우드를 제공하지만 비주얼이 좀 떨어진다. 

이 플래시 타입의 태그 클라우드 플러그인은 직접 설치해야 하는 불편은 있다.

첨부된 파일에서 압축을 풀어서 html/css 메뉴에서 파일업로드를 통해 업로드한다.

순서대로 따라하면 손쉽게 설치할 수 있다.

TiCumulus.zip

압축된 파일을 풀면 swfobject.js, tagcloud.swf, script.txt의 파일 3개가 생성된다.

1. swfobject.js, tagcloud.swf 이 2개의 파일을 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

당연히. 모바일에서는 플래시 기반의 이 태그 클라우드는 보이지 않는다.