[블로그] 티스토리에 태그클라우드를 적용하자(어렵지 아나요)

티스토리를 이용하다보면 태그란이 뱅글뱅글 도는 것을 발견하게 됩니다. 
이거 뭥미?하며 사이드바의 스킨에 넣어주고 싶습니다.
초보블로거인 닭큐도 쉽게 됩니다. 금 모두 할 수 있다는 뜻입니다.

금 태그 함 돌리러 가봅니다.

 

[뱅글이 명령어 적용 전]

[뱅글이 명령어 적용 후]

 

1. 우선 기존의 스킨을 저장합니다.

티스토리의 관리자로 들어가면 상단메뉴에 '스킨' 나옵니다. 그리고 그림처럼 스킨저장 있습니다. 일단 현재스킨을 저장합니다. 지금까지 쓰던 스킨 날라가면 스스로 자신을 매.우. 안쓰럽게 생각하게 됩니다.


 

2. 스킨의 HTML/CSS 편집

스킨의 HTML/CSS 편집 말구 파일 업로드를 누릅니다.

파일업로드 보이시죠? 거기에 요기 아래 파일 다운로드 받아서 압축 풀면 파일 두개 나옵니다. 2개 모두 올려줍니다.

TiCumulus.zip

3. HTML을 수정합시다.

 파일 업로드 옆칸에 있는 HTML/CSS를 클릭합니다. 

글구 Ctrl + F를 누르고 검색어에 "태그목록"이라고 칩니다. 금 대부분 위 노란 표시처럼 나옵니다. 글구 우리는 빨간색 상자안에 <ul>부터 </ul>을 아래 있는 텍스트로 바꿀겁니다.

tag.txt

텍스트를 다운받아 안에 있는 텍스트를 <ul>부터 </ul>까지를 포함하여 붙여넣기를 하면 대충 요런 모습으로 바뀝니다.

머 다 되었습니다.
맨 아래 있는 미리보기 먼저 하시구 된다 싶으면 저장하기 눌러서 완료하시면 됩니다.


4. 시마이
텍스트의 명령어를 조금씩만 바꾸면 색깔 및 속도 등을 조절할 수 있습니다.
머 대충 해 보고 안되면 텍스트에 있는 것 또 붙여다 쓰면 되니까 겁먹지 맙시다.

위 붙여넣기 한 HTML 명령어 설명합니다.
요건 꼬마루트님의 블로그를 참고합니다.

var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
---> 100% : 가로크기, 200 : 세로크기, #ffffff : 태그클라우드 바탕화면 색깔

t.addVariable("tcolor", "0x222222");
---> 태그의 글씨색

t.addVariable("tcolor2", "0x55ff00");
---> 빈도 수가 높은 태그의 글씨색

t.addVariable("hicolor", "0x00ffff");
---> 마우스가 올려진 태그의 글씨색

t.addVariable("tspeed", "150");
---> 태그의 움직이는 속도, 숫자가 커질수록 빨라짐.

색상을 넣을 때는 코드표가 필요하니 아래 링크를 따라가시면 코드표를 볼 수 있습니다.

RGB 색상코드표 보러가기