블로그의 기능중 하나인 태그는 좋은 기능 임에는 틀림 없겠지만,
밋밋한 텍스트들이 그냥 쭈욱 나열되어 있는 형태 라서 그런지
미관상으로 보기엔 그닥 예쁘지 않다고 느껴지는 것이 사실 입니다.
기능은 그대로 이지만, 더 멋잇는 태그 목록을 구현하고 싶은분들을 위한 포스팅 입니다.
제 블로그 우측 상단에 있는 바로 이것이 움직이는 태그목록 입니다.
마우스를 갖다 대면 이리 저리 움직입니다.
단순한 텍스트 나열의 밋밋한 태그가 아니라 좀더 멋진 태그가 되었죠?
이번 포스팅은 이 태그목록을 구현 하는 방법 입니다.
일단, 이 플러그인은 원래 Roy Tanck 라는 분이 공개한 워드프레스용 플러그인 입니다.
하지만, Blue'nLive 님이 몇가지 문제점을 보안해서
티스토리용의 TiCumulus 를 새로 출시 해 주셨지요.
이 자리를 빌어 감사를 표합니다.
잘 쓸게요 ^^
설치 방법입니다.
위의 링크를 통해 파일을 다운받아 압축을 풀면
swfobject.js와 tagcloud.swf 라는 이름의 파일이 나옵니다.
블로그 관리자 모드 - 스킨 - HTML/CSS 편집 모드 - 파일 업로드 순서로 들어가서
이 두 파일을 직접 업로드 합니다.
HTML 편집모드에서 찾기기능 (Ctrl + F) 기능을 이용해서 s_random_tags 소스를 찾습니다.
찾은 소스의 바로 위, 아래에 보면, <ul></ul> 이라는 소스가 보이실것 입니다.
바로, 이 아래 스샷에서 선택 한 부분 인데요
선택 한 부분을 이렇게 바꿔줍니다.
붙여넣기 할 소스는, 아래의 링크를 통해 텍스트파일에서 전체복사 해서 사용하시면 됩니다.
Tip : 스크립트의 소스
9행의 스크립트를 보면, 100% 200 #ffffff 이라는 소스가 보일겁니다.
이건, 가로 100%. 세로 200픽셀 이라는 설정이고, #ffffff 는 배경의 색상 입니다.
10행 에 있는 ("tcolor", "0x222222"); 는 떠돌아 다니는 글자의 색. 기본색 입니다.
그 옆의 ("tcolor2", "#FFC300"); 는 인기 태그의 색상 입니다.
10행의 맨 마지막에 있는 ("hicolor", "#000069"); 는
태그 위에 마우스를 올렸을때 선택된 태그의 색상 입니다.
색상 변경을 원하실 경우에는, 각 위치에서 따옴표 ("") 안에 있는
0x222222 #FFC300 #000069 등의 코드를 원하는 색상의 코드로 교체 해 주시면 됩니다.
참조 - 웹에서 적용되는 색상 코드 모음
11행에 있는 ("tspeed", "120"); 은, 태그들이 회전 하는 속도 입니다.
숫자가 낮을수록 천천히 회전 합니다. 자신이 원하는 속도에 맞도록 조절 하세요.
'Blog Story > 블로그 팁' 카테고리의 다른 글
카테고리글 더보기 플러그인 위치변경 (0) | 2010.05.19 |
---|---|
카테고리 메뉴 자동으로 펼치기 (0) | 2010.05.19 |
[물결플래시] - 티스토리 블로그 제목에 적용하기 (3) | 2010.04.20 |
블로그 사이드바 링크 정리하기 (11) | 2009.09.06 |
웹에 적용 되는 색상 코드 (3) | 2009.08.23 |