본문 바로가기
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 

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


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

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

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

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






댓글43

  • BlogIcon 잘난맛에사는 2009.04.15 09:27

    하핫;; 저도 이 플러그인 블루앤 라이브님 포스트보고 설치했는데
    사용법 정리가 깔끔하네요 ^^
    답글

    • BlogIcon 애쉬™ 2009.04.15 11:42 신고

      안녕하세요~^^ 대형티브이 구입 축하드립니다!^^ 태그클라우드 멋지더라구요! 벌써 적용하셨군요!^^

    • BlogIcon 잘난맛에사는 2009.04.15 15:26

      저도 필받아서 설정법 포스트하나 써버렸습니다 ㅎㅎ
      링크해주신 외국블로그가 도움이 많이 됬네요 ^^ 트랙백 ㄱㄱ

    • BlogIcon 애쉬™ 2009.04.15 17:27 신고

      덕분에~ 칼라설정 좀 더 했습니다. 근데..오렌지색으로 컬러2를 설정했는데. 반영이 안 되네요~ "사진"이 색이 다르게 나와야 하는데..

    • BlogIcon 애쉬™ 2009.04.15 17:42 신고

      음...색이 다르게 나오긴 한데..빨간색이 빨간색이 아닌것 같네요..옵션중에 0x 이게 포인트인가요~ 공부해야되겠습니다. ㅋ

    • BlogIcon 잘난맛에사는 2009.04.15 18:43

      0x 는 뒤에 나오는 숫자가 16진수라는걸 표시해주는 역할이므로 꼭 붙이셔야 하구요
      빨간색이면 0xff0000 이긴 한데 사용빈도에 따라서 색깔이 강해지는 효과가 적용되서 원하는 색깔이 안나온거같은데......
      사진 태그로 포스트가 51건 이시네요 ㄷㄷㄷ;; 글수가 부족해서 그런지 기본 글자색깔이랑
      겹치면서 어둡게 나오는지 좀더 알아봐야겠지만...
      저는 아직 포스트가 많지않아 직접 테스트를 해볼 수가 없네요 ㅠㅠ;;

    • BlogIcon 잘난맛에사는 2009.04.15 19:19

      아무래도 tcolor와 tcolor1의 색깔이 혼합되어서 표시되는것 같습니다.. -0-;;
      사용 빈도에 따른 농도변화도 같이 적용되구요..
      저도 색깔공부좀 해야겠네요 oT^To

    • BlogIcon 애쉬™ 2009.04.15 20:15 신고

      그렇죠? 색이 혼합되는 느낌이 강하더라구요..그래서 원본색을 조금 약하게 했더니..그나마 조금 낫더라구요^^ 머 나머지는 원작자님께 맡기는 수밖에요!^%^

  • BlogIcon 라디오키즈 2009.04.15 09:39

    저도 설치해볼까봐요.^^ 멋지네요~~
    답글

  • BlogIcon smartjoker 2009.04.15 10:22

    오~ 이거 멋지군요. 바로 설치했습니다. ㅎㅎㅎ
    가로 사이즈는 100% 대신에 그냥 숫자만 넣으시면 됩니다. 세로폭 조정하듯이 하시면 될겁니다. ^^
    답글

    • BlogIcon 애쉬™ 2009.04.15 13:12 신고

      ^^ 네, 100%로 하니깐...회전하는 구체가 넘 작아서
      저도 250으로 늘렸어요~^^ Tag 수가 좀 더 많았으면 좋겠는데 그 방법은 잘 모르겠더라구요~

    • BlogIcon smartjoker 2009.04.15 14:12

      티스토리에서 기본으로 설정 가능한 최대 태그 수는 40개인데.. 얼마나 많이 하실려구요. ^^;;
      와이드 250.. ㄷㄷㄷ 크니까 보기에도 시원시원해 보여서 좋군요.ㅎㅎ

    • BlogIcon 애쉬™ 2009.04.15 20:15 신고

      그러게요..그냥 보일때는 30개정도가 적당한것 같아서 그렇게 해 놨었거든요..40개로 바꾸니 이제 좀 많아 보입니다~^^

  • BlogIcon 마루. 2009.04.15 10:24 신고

    바~~로 올렸습니다..^^ 멋진데요...속에것좀 만져 볼라고 하는데 ..ㅋ..친구한테 물어보구 연구좀 해야 할듯..
    답글

  • BlogIcon 언감생심™ 2009.04.15 10:57

    새로운 정보를 알려 주시는군요 ^^
    바로 적용했습니다 ㅎㅎ
    답글

  • BlogIcon 재아 2009.04.15 11:11 신고

    정보 멎지네요~~ 역시!! 굿!!
    답글

  • BlogIcon MORO 2009.04.15 13:22

    자꾸만 복잡해는것 같네요..ㅎ
    답글

  • BlogIcon 미리누리는천국 2009.04.15 19:10

    포럼에서 이걸보고 우와 신기하군 하면서 설치를 하려고 보니...1단 스킨..급 침작모드로..^^
    적용하신거 아주 이쁘네요
    답글

    • BlogIcon 애쉬™ 2009.04.15 20:17 신고

      윽! 1단 스킨의 비애~ 그래도 1단 스킨은 간결 그 자체가 보기 좋아요~^^ 전 간결보다는 사이드바가 있는게 여러모로 편해서~... 저도 간결좋아라 한답니다!

  • BlogIcon 코딱지 2009.04.16 14:27

    크억~~!! 오늘도 좋은 정보가.... ㄷㄷㄷㄷ... 감사합니다.
    얼른 해봐야 겠어요 ^__^;
    근데 애쉬님 블로그 제목글씨가 막 이상해 져요..
    물결(?) 모양? 그런것도 html 이나 css란에서 수정하시는건가요? 신기한거 무척많네요..ㅎㅎ
    답글

    • BlogIcon 애쉬™ 2009.04.16 15:51 신고

      ㅋㅋ 네, 저도 어떻게 하는지는 모르구요..스킨이 원래 그렇게 설정되어 있더라구요! 좀 더 잘 알면 폰트도 수정했겠죠!^^

  • BlogIcon 민성 2009.04.25 19:55

    몇일전부터 보여 신기해 했는데.. 애쉬님 덕에 저도 설치(?) 했습니다..

    좋은 정보 감사합니다..^^
    답글

  • BlogIcon 김새싹 2009.04.26 04:36

    헐, 정말 멋있어서 적용했더니

    눈이 번쩍 뜨이는듯.. 감사합니다
    답글

  • 2009.06.24 17:59

    비밀댓글입니다
    답글

  • 2009.06.24 18:09

    비밀댓글입니다
    답글

  • BlogIcon 치아친구 2009.07.02 17:04 신고

    좋은 정보 감사합니다. ^^ 밋밋했던 블로그에 신선함이 더해졌네요. 기분이 좋아졌습니다. ㅋ

    외형이 아니라 알찬 내용으로 기분이 좋아져야 할텐데 말이죠. ㅋ
    답글

  • BlogIcon 키작은나비 2009.07.07 19:18

    도움되요! 저 지금 해봐야겟어요! +.+ 제가 이거 할려고 포스팅 찾아보고 그랫는데
    여기처럼 설명이 쉽게 되어 있는 곳이 없네요..ㅜㅜ감사합니다~
    답글

  • BlogIcon pop-up 2009.07.07 23:21

    와, 멋지네요.
    밋밋한 태그 목록의 느낌이 싹~ 달라졌어요 :)
    좋은 정보 고맙습니다~
    답글

  • BlogIcon 전장의이리 2009.07.19 01:55

    좋은 정보 감사합니다. 너무 좋네요~ ㅎㅎ
    답글

  • BlogIcon 전장의이리 2009.07.19 01:55

    좋은 정보 감사합니다. 너무 좋네요~ ㅎㅎ
    답글

  • BlogIcon taixuan 2009.07.22 09:56

    덕분에 재 블로그에도 잘 설치 했습니다. 말을 좀더 조리있게 잘 풀어 놓으셔서 이해하기 쉬웠습니다.
    감사합니다. 즐거운 하루 되세요
    답글

  • BlogIcon kiki 2009.12.10 22:48

    다른데서 보고 설치하다가 계속 에러나서 이유를 모르던차에.. 애쉬님 블로그 보고 성공했습니다. 감사드려요. ^^
    답글