움직이는 멋진 태그 구현하기

블로그의 기능중 하나인 태그는 좋은 기능 임에는 틀림 없겠지만,
밋밋한 텍스트들이 그냥 쭈욱 나열되어 있는 형태 라서 그런지
미관상으로 보기엔 그닥 예쁘지 않다고 느껴지는 것이 사실 입니다.
기능은 그대로 이지만, 더 멋잇는 태그 목록을 구현하고 싶은분들을 위한 포스팅 입니다.

제 블로그 우측 상단에 있는 바로 이것이 움직이는 태그목록 입니다.
마우스를 갖다 대면 이리 저리 움직입니다.

단순한 텍스트 나열의 밋밋한 태그가 아니라 좀더 멋진 태그가 되었죠?
이번 포스팅은 이 태그목록을 구현 하는 방법 입니다.


일단, 이 플러그인은 원래 Roy Tanck 라는 분이 공개한 워드프레스용 플러그인 입니다.
하지만, Blue'nLive 님이 몇가지 문제점을 보안해서
티스토리용의 TiCumulus 를 새로 출시 해 주셨지요.

이 자리를 빌어 감사를 표합니다.
잘 쓸게요 ^^

 

TiCumulus.zip

설치 방법입니다.
위의 링크를 통해 파일을 다운받아 압축을 풀면
swfobject.js와 tagcloud.swf 라는 이름의 파일이 나옵니다.


블로그 관리자 모드 - 스킨 - HTML/CSS 편집 모드 - 파일 업로드 순서로 들어가서
이 두 파일을 직접 업로드 합니다.

HTML 편집모드에서 찾기기능 (Ctrl + F) 기능을 이용해서 s_random_tags 소스를 찾습니다.

찾은 소스의 바로 위, 아래에 보면, <ul></ul> 이라는 소스가 보이실것 입니다.
바로, 이 아래 스샷에서 선택 한 부분 인데요

선택 한 부분을 이렇게 바꿔줍니다.

붙여넣기 할 소스는, 아래의 링크를 통해 텍스트파일에서 전체복사 해서 사용하시면 됩니다.

tag.txt

Tip : 스크립트의 소스


9행의 스크립트를 보면, 100% 200 #ffffff 이라는 소스가 보일겁니다.
이건, 가로 100%. 세로 200픽셀 이라는 설정이고, #ffffff 는 배경의 색상 입니다.

10행 에 있는 ("tcolor", "0x222222"); 는 떠돌아 다니는 글자의 색. 기본색 입니다.

그 옆의 ("tcolor2", "#FFC300"); 는 인기 태그의 색상 입니다.

10행의 맨 마지막에 있는 ("hicolor", "#000069"); 는
태그 위에 마우스를 올렸을때 선택된 태그의 색상 입니다.

색상 변경을 원하실 경우에는, 각 위치에서 따옴표 ("") 안에 있는
0x222222  #FFC300  #000069 등의 코드를 원하는 색상의 코드로 교체 해 주시면 됩니다.

참조 - 웹에서 적용되는 색상 코드 모음



11행에 있는 ("tspeed", "120"); 은, 태그들이 회전 하는 속도 입니다.
숫자가 낮을수록 천천히 회전 합니다. 자신이 원하는 속도에 맞도록 조절 하세요.