본문 바로가기
ETC story/Blog & Tistory.....

태그를 이쁘게 보자! - Cumulus for Tistory 를 소개합니다.

by 애쉬™ 2009. 4. 15.

먼저 이 글은 제가 종종 들려서 좋은 정보 얻고 있는  티스토리>포럼>스킨/플러그인 에서 Blue'nLive 가 소개해 주신

플러그인을 이용한 글임을 밝힙니다.  자세한 소개는 http://bluenlive.net/491 를 참고하시면 됩니다.^^



자, 일단 제 블로그 오른편의 태그 목록을 보세요..먼가 달라졌지요?^^




네, 위와 같이 약간 3D 형태로 보이는 태그가 보이시죠?

자, 마우스를 태그 위로 움직여 보세요~

보신 소감이 어떠신가요?

막~~~~~ 지구본처럼 돌아가는 태그목록... 기존꺼보다는 멋지지 않나요?^^

네, Cumulus for Tistory 라는 태그 플러그인입니다.

원래 워드프레스용으로 만들어진 플러그인을 티스토리에 맞게, 그리고 한글폰트도 가능하게

Blue'nLive 님이 수정해서 올리신 거라네요.. 감사합니다!!!



그럼 이제 적용하는 방법을 알려드려야죠!

자, 일단 아래 파일들을 다운받아서 관리자모드>스킨>Html/Css 편집 으로 가서 파일 업로드를 이용해서 블로그에 올려줍니다.


위 압축파일을 열면 swfobject.js 란 파일과 tagcloud.swf 란 파일 2개가 나옵니다.
반드시 압축해제한 상태에서 파일 2개를 업로드 해주세요



파일을 업로드 하셨으면 html 을 수정하겠습니다.

 Skin.html 에서 이 부분을 찾으세요


찾으셨나요? 보시다시피 <태그목록> 또는 <s_random_tags>를 찾으시면 요런 부분이 보이실 겁니다.
수정해야 할 부분은 제가 마우스로 표시해 놓은 부분입니다.
<ul>  ~ </ul> 부분이죠..


그럼 이 부분을 고쳐보죠~

위 구간을 아래와 같이 똑같이 고쳐보겠습니다.


네, 사진을 보고 다 치라고 하면 여기서 좌절하시는 분 많겠죠~^^
텍스트 문서로 만들어놨으니 열어서 복사>붙여넣기로 수정하세요


위 텍스트 파일 열면 그 전체를 복사하시면 될겁니다.

그리고 나서 "저장"



그리고 나면 저처럼 이쁜 태그목록을 보실 수 있습니다.

참고로 스크립트 중간에 100%, 200 이런게 보이실겁니다.

이건 가로사이즈를 100%로 하란거구, 세로를 200픽셀로 하란겁니다.

색을 "0x222222"로 해 놓은것은 티스토리 기본색상으로 하란건데, 본인 입맛에 맞게 수정가능하십니다.

전 스크립트는 잘 몰라서 원본 그대로에서 움직이는 속도만 좀 빠르게 변화시켰네요^^

이 스크립트의 변수를 좀 자세히 알고 싶으신 분은

http://bluenlive.net/491 를 방문하시거나,

http://www.roytanck.com/2009/03/11/how-to-use-wp-cumulus-shortcodes/#more-1346 

를 참고하시면 되겠습니다~^^


그럼 블로그를 이쁘게!^^

아, 혹시 아시는분 알려주세요..

제가 위에 텍스트 박스들 사용했는데 저거 무조건 가로사이즈가

최대로만 열리네요. 사이즈 폭 조정하는 법 아시는 분 알려주시면 감사하겠습니다~^^






댓글