2009년 6월 23일 화요일

텍스트큐브 사이드바에 플래쉬 태그 적용하기

요것이 사이드바 태그 구름


 위에 사진이 깜군이가 사용하는 사이드바 태그 구름입니다. 티스토리에서 사용하던것인데 원 소소는 BLUEnLIVE 님이 공개해주신 겁니다.

 사실 저는 웹소스에 대해 어떤 교육도 받지 못한 무뇌한입니다. 그래서 저것을 텍스트큐브에 적용하기는 쉽지 않았습니다. 왜? 냐면, 티스토리에서는 스킨편집시 파일업로드에서 웬만한 파일은 다 쉽게 업로드 되지만, 텍스트큐브는 제한이 있습니다.

 위에 플래쉬 태그를 적용하기위에서는 swfobject.jstagcloud.swf 이 두파일이 필요한데, 텍스트큐브에서는 요 두 파일을 올릴 수가 없는겁니다. 이것은 제가 뚫을 수 없는 벽이 였습니다. 혼자 무지하게~ 고민하다. 답은 의외로 간단하게 위 두파일은 다른계정에 있어도 상관없겠다 는 결론을 내리고 적용해서 성공했습니다. T.T

 간단한 혼자 삽질 프로젝트를 공개해 드리겠습니다.
<s_sidebar_element>
                            <!-- 태그목록 모듈 -->
                                <div class="tagbox widget">
                                    <h3>태그 구름</h3>
                                    <div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
  </s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/36/365550/skin/images/swfobject.js"></script>
<script type="text/javascript">
  var t = new SWFObject("http://cfs.tistory.com/custom/blog/36/365550/skin/images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#FFFFFF");
  t.addVariable("tcolor", "0x222222");t.addVariable("hicolor", "0x3C5A91");t.addVariable("tcolor2", "0xF0E68C");
  t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");
  t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
  t.write("TiCumulus");
</script>
                                </div>
                            </s_sidebar_element>


 위 소스가 그냥 제가 갖다가 붙인 것입니다.

 빨간색글자가 swfobject.js 와 tagcloud.swf 의 주소입니다. 제가 좀 얌체같이 쓰지않는 티스토리 계정에 올렸습니다. 혹시 사용해보고 싶으신 분들은, 아무계정이나 두파일을 올린후 올린 주소를 빨간색 글자부분을 지우고 사용하시면 되겠네요.

 그리고 제가 편집한 제 스킨에는 원래 태그목록이 사이드바에 없었습니다. 하지만 사이드바가 나열된 곳에 위 소스를 그냥 갖다붙이니 적용이 되네요.^^

 추가적으로 #FFFFFF는 배경색입니다.
 
 0x222222
는 태그의 기본색입니다. 바꾸시려면 0x웹색상표를 해주시면 되겠습니다. 웹색상표는 검색하면 잘 나옵니다.^^

 0xFF3333 은 마우스커서를 올렸을때 나타나는 색상입니다.

 0xF0E68C 는 인기태그 색상인데, 제가 인기있는 태그가 없어서 적용될런지는 잘 모르겠네요 ^^

 아무쪼록 저처럼 스킨 혼자 고치기 삽질 프로젝트를 하시는 분들에게 도움이 되었으면,
 합니다.

 #추가사항
 
 혹시 스킨을 수정하였는데, 나오질 않을경우!! 위젯관리에서 태그목록 모듈이 새로 생겼을 겁니다. 그걸 사이드바에 드래그해서 적용시켜주세요.

댓글 41개:

  1. 태그공부 잘하고 갑니다. 유익했습니다.

    답글삭제
  2. 비밀 댓글 입니다.

    답글삭제
  3. @세미예 - 2009/06/23 08:04
    유익하셨다니, 정말 제가 다행이네요^^



    텍스트큐브와서 첫 대글입니다.T.T 캄사합니다.~ 자주 놀러와 주세영.. 볼것은 없지만...

    답글삭제
  4. @Anonymous - 2009/06/23 08:04
    글에도 밝혔지만, 저는 웹소스에 무뇌한 사람이고, 전부 응용하고 붙인것 밖에 몰라서요. 죄송합니다. T.T

    답글삭제
  5. 전에 실패했는데 다시 시도해 볼깝숑

    답글삭제
  6. @mahabanya - 2009/06/23 12:22
    와웅 잘 되네요.

    전에는 비슷한 소스(같을 지도)로 파일은 글을 하나 써서 첨부파일로 올려서 파일 주소로 했는데 실패했었거든요.

    답글삭제
  7. @mahabanya - 2009/06/23 12:22
    헉;; 구글 우수 블로거님께서 오셔서 사용까지 해주시니, 영광입니다.^^ 저도 열심히 따라가겠습니다.~ 감솨~ 감솨여~

    답글삭제
  8. CUMULUS 를 사이드바에 적용하려고 이 방법 저 방법 다해보다가

    성공을 했습니다. 정말이지...성공하고 난 뒤에 여기에 있다니요;;

    근데 제가 사이드바를 두개를 쓰는데 바깥쪽 사이드바에

    태그 클라우드를 뒀을땐 아무 문제가 없는데 안쪽 사이드바에

    위치 시킬때는 바깥쪽 사이드바가 안쪽 사이드바 아래로 내려오는

    현상을 보입니다. 혹시나...제가 잘 몰라서요^^;

    도움을 좀 요청드립니다.

    답글삭제
  9. @정성훈 - 2009/06/29 16:46
    와우~ 빗톡 유저시군요.!! 대환영입니다.~ 만쉐이~

    근데 제가... 답을 드리기가 좀 어렵겠네요.T.T

    저는 전문가가 아니라서, 그런데 스킨이 저하고 같은거시네요? 제가 집에서 한번 죽어라, 한번 해보겠지만, 아무래도 다른 고수분들에게 문의하시는게 좋을것 같습니다. 지금은 겜방이예요. T.T 내일은 새벽부터 일가야하공... 음... 암튼 일단 죄송합니다...T.T

    답글삭제
  10. @정성훈 - 2009/06/29 16:46
    움하하!! 성공!! 성공~!! 방명록을 확인하세염~~

    방명록에 남겨드렸습니다.~~

    답글삭제
  11. 아하핫- 옙^^; 빗톡에 아직 시니어 활동중입죠~

    기본은 이 스킨에서 저도 시작 했습니다.

    이미지 소스들 주소 다따서 받아서 포토샵서 수정하고-

    '그레이&화이트'한 느낌의 블로그로 만들려구요^^;

    시간 되실때 조목조목 정보 공유 부탁드립니다~!!

    답글삭제
  12. trackback from: 태그를 꽤나 멋지게 만들기
    원본은 티스토리에서 적용하는 Ti-Cumulus이며 이 포스팅은 BLUEnLIVE님의 http://zoc.kr/543 포스팅에 기초합니다. 지난번에 쓸데없이 낚기만 했던 포스팅에서 예고한대로 텍큐 닷컴에서 Cumulus쓰는 법을 함 포스팅 해봅니다~ 이짓을 할려면 조금 준비물이 필요합니다. 텍큐닷컴 블로그 (텍큐닷컴 블로그를 꾸미려면 우선 텍큐닷컴 블로그가 필요하다) 테터계열 블로그 스킨을 한번 만져봤거나 혹은 그에 상응하는 지식과 경험 http:/..

    답글삭제
  13. 쿨럭...제가 옛날에 했던 포스팅하고 유사한 내용이군요;;

    ㅎㅎㅎ 하지만 이쪽이 더 자세하다는거..일단 트랙백 걸어놓겠습니다~

    답글삭제
  14. @ToDieFor - 2009/06/29 22:26
    저도 시니어랍니다. 빗톡은 참 좋은곳이죠^^

    그런데... 제가 열심히 혼자 테스트하면서.. 답을 찾았는데.. 한번만 다시 시도해 주세요

    T.T

    답글삭제
  15. @아하하라 - 2009/06/29 23:30
    유사한 정도가 아니라 똑같네요^^

    표절한거 아니예요^^ 저 얼마나 혼자 삽질 했는데요.'

    진작에 아하하라님 포스트를 봤다면... 고생안했을텐데...

    답글삭제
  16. 저도 위에서 말씀하신 두가지 파일을 외부링크로 연결해서 달아보려고 시도해보았는데, 이글루스랑 네이버는 아예 외부링크 불가라서 연결이 되지 않네요.



    위에서 보면 티스토리 계정에 올리셨다는 말이 있는데. 어떻게 올리신건가요?. 스킨 자체 업로드 기능에 올리면 그 파일 주소를 따올 수가 없고, 글쓰기 기능에 올려놓으면 Tagcloud.swf를 아예 게시물에서 먹어버리네요.



    좀 설명해주시면 정말 감사하겠습니다. 3시간 째 막혀서 좌절 중 T.T

    답글삭제
  17. @프라나비 - 2009/07/12 13:15
    http://www.kkamtube.co.cc/30



    님을~~ 위한 포스트입니다.^^ 글쓸거리가 없었는데.. 감사해요.~!!

    답글삭제
  18. 간간히 보이길래 찾아볼까 했었는데



    여기서 이렇게 알려주시는군요..



    감사...함 해봐야겠네요

    답글삭제
  19. @hardboil - 2009/07/21 01:27
    아이쿵;; 않주무셨네요. 늦은시간에.. 저도 지금 블로그 꾸미기 삽질중입니다. 지금 이페이지 좀 수정중인데... 소스부분에 SyntaxHighlighter 플러그인 적용실험중인데.. 잘 보이시고 잘 되시는지;;;

    답글삭제
  20. 아하~! 이게 구름 ? 태그군요~~

    참 신기했었는데..그나저나 깜군님이 점점 멋져지는+_+

    답글삭제
  21. @어찌할가 - 2009/07/21 02:56
    야심한 밤에 안 주무시공;; 그러는 난;;퍽!!!

    비가 많이 온다는데... 조심 하세요...에공 밖에서 번개치고 천둥소리 땜에 잠을 못잡니다. 뮤셔~~ㅋㅋ

    블로그 이미지 변경하셨네요.^^ 음..대강 실물을 이메진중~~

    답글삭제
  22. 맘에 들긴 하오나,,

    구름을 구성할 태그가 모자랄 듯..ヾ(-_-;)



    암탄, 죠기 ( ゚∀゚)ア 말풍선 talk 이미지 귀엽삼..

    답글삭제
  23. 안녕하세요^^ 저도 이번에 태그플래시 적용하려고 이것저것 시도해 봤는데 중요한건 파일이 올려져 있는 계정이네요..... 저도 비공개 글에 업로드해서 해봤으나 안되서 그냥 티스토리계정에 올려서 하니 바로 적용되었네요. 많은 도움 되었습니다^^

    답글삭제
  24. @eluw - 2009/07/24 18:57
    비공개글이 다른 파일들은 잘 작동하던데 SWF파일만은 잘 불러오지 못하는것 같더군요.. 저도 잘 알지는 못해요^^ 구냥 혼자 삽질로 무진장 해보는겁니다.^^ 제글로 성공하셨다묜!! 이글을 공개한 저도 성공!!캬캬;;

    답글삭제
  25. @cANDor - 2009/07/22 22:40
    태그야..무한점 넣으시면 될거이고,,, 말풍선 이미지는 퍼가시면 되옵니다.^^ 그나마저나, 블로그 이미지는 초승달? 초승해?...;;

    답글삭제
  26. @kkamgun - 2009/07/24 23:21
    엥?

    일식. 일.식.사.진.임.둥!!! -_-ㅋㅋㅋ

    답글삭제
  27. @cANDor - 2009/07/22 22:40
    사실은 알고있었음둥...!!

    썰렁한 개그라 안먹혔을뿐 T.T

    답글삭제
  28. @mahabanya - 2009/06/23 12:22
    음...전 안되네요.. 역시 송충이는 솔잎을 먹어야...ㅡㅡ;

    텍큐에서 만들어줄 때 까지 기둘려야 겠네요 ㅋ

    답글삭제
  29. 전 티스토리에다 했는데 안되네요.. 딴 분들은 다 된다는데 난 왜 안되지? ㅡㅡ 만일 저 파일 두 개가 다른 계정에 있어도 되는거라면 굳이 파일 따로 올릴 필요 없이 그냥 저 소스만 같다 붙이면 되는가 아닌가요? 파일은 깜군님 계정에 있는걸 불러올테니까요.. 아닌가???

    답글삭제
  30. @shyjune - 2009/10/21 12:12
    안녕하세요^^ 답글이 늦었네요.. 지금도 제가 공개한 소스로 해도 적용이 된답니다.

    혹시 HTML위젯으로 만들어 붙이신건 아닌지?;;

    이 방법은 내블로그 관리하기 - 꾸미기 - 스킨편집 에서

    Skin.html내용을 변경해야 하는것입니다. 제가 다른 블로그로 테스트해봤는데, 아직 제 티스토리 계정에 파일이 잇어서 적용이 됩니다. 다시한번..도전해보세요^^

    답글삭제
  31. goMan님의 구름 포스트를 보고 블로그 사이드바에 구름태그를 달았습니다



    goMan님이 님의 주소에 링크를 걸어 두어서 도움을 받고자 찾아왔습니다



    구름태그 링크가 goMan님처럼 해당되는 글1건이라는 안내글과

    본문이 펼쳐져 보여져야 하는데



    제 구름태그는 해당되는 글 1건만 표시되고 본문 포스트는 펼쳐져 보이지 않습니다



    어제 구름태그를 달고 확인할때는 본문 포스트가 펼쳐지고 해당되는 글과 1건이 아니라 여러건이 보여졌는데



    하루가 지나서 구름태그가 신기해서 클릭을 해보니 오늘은 해당되는

    글1건만 표시가 되고 본문포스트는 펼쳐지지 안아서요



    제가 tistory 블로거 초보라서 소스 보는데 애로사항이 많습니다



    소스를 고쳐서 본문포스트가 보일수 있는 방법이 있으면 가르쳐 주십사 하고 들을 남겨 봅니다 부탁 합니다



    제 블로그에 구름태그를 한번 클릭을 하셔서 뭐가 잘못되었는지..확인을 좀 부탁드립나다

    답글삭제
  32. @이정애 - 2009/10/22 18:56
    음;; 먼저 goMan님이 뉘신지 ;; 링크 정도는 좀 걸어두시는것이 좋을듯 하군요. 흐흐;;



    글 내용이 안보인다는 말씀같은데 이것은 소스를 고칠것이 아니라... 티스토리같은경우..음...



    블로그관리센터 - 스킨 - 화면출력설정 -

    선택화면 = <글 목록 숫자는 1나 정도 하시고!!

    그뒤부분이 중요한테 "목록만" 요것을 선택하면 님처럼 목록만 나오는거예요. '내용만' 혹은 '목록+내용'을 선택하시면 글 내용도 나온답니다.

    답글삭제
  33. 감사합니다 해결 되었습니다



    http://blogple.tistory.com/315?srchid=BR1http%3A%2F%2Fblogple.tistory.com%2F315



    goman님의 블로그 주소입니다 댓글에 링크 어떻게 넣어야 하는지

    몰라서 주소를 붙여 넣었습니다

    답글삭제
  34. 님 덕분에 드뎌 태그구름 달았네요^^ 정말 감솨요~

    답글삭제
  35. @이정애 - 2009/10/23 12:33
    아하~ Goman님이 그분이셨군요.ㅋㅋ



    암튼 해결되어서 제가 다 기쁩니다. 흐하하하

    답글삭제
  36. @shyjune - 2009/10/25 20:07
    저도 다 능력좋으신분들이 만들어 주신거 사용하는겁니다.~

    그래도 제글보고 하셨다니.. 왠지 뿌듯해지네요.ㅎㅎ



    http://kkamtube.textcube.com/63 요글을 보신다믄 티스토리 계정이 아니더라도 텍스트큐브 본문에 파일첨부하여 사용하실 수도 잇답니다.



    제 설명이 허접하지만, 자~알 보시면 이해를 해주실지도.ㅠㅠ



    화이팅!!

    답글삭제
  37. 샤이준님 블로그에서 보고 구름 태그 달려고 왔는데 쉽게 다는 그런 위젯이 아니네요. 아직은 소스를 건드려 본 적이 없어 이런 것도 있구나 하고 갑니다. ㅡ.ㅡ;;

    답글삭제
  38. 그동안 저 구름태그가 그렇게 달고 싶었는데, 별도로 올릴 수 있는 외부 계정이 없어서.. 포기하고 있던차에... 혹시나 하여 찾아 보다가 이곳에 왔는데... 낯이 익은 많은 분들이 이미 이곳에서 도움을 받으셨었군요.. ^^

    저도 웹관련 태그는 잘 알지 못하는 처지라서...

    위 글에 올려 놓으신 태그를 그냥 복사하여 붙여 넣으니... 문제 없이 잘 되는군요...



    근데, 한가지 질문이 있습니다. 제 티스토리 계정에도 플레쉬파일과 js파일을 업로딩은 했습니다. 위의 태그에 파일 주소는 아마도 kkamgun님의 티스토리 주소 같은데..

    티스트로 주소 cfs.tistory.com에서 앞의 cfs만 저의 주소로 바꾸면 되는 건지... 하지만, 그렇게 하니... 되질 않네요..



    위의 태그 그대로 사용을 해도 사용하는데 큰 지장은 없겠지만, 왠지 폐를 끼치는 것 같기도하고... ^^

    아무래도 제 티스토리의 계정에 올린 파일을 지금 사용하고 있는 텍스트큐브에 적용을 하고 싶은데... 어떻게 주소값을 설정하면 되는지.. 알려주시면 고맙겠습니다. (_ _)



    암튼... 구름 태그를 달 수 있게 되어 너무 좋습니다.

    감기 기운이 있고 머리가 찌끈한데도... 기분이 랄랄라입니다. ^^

    답글삭제
  39. Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.



    이건 무슨말일까요?

    답글삭제
  40. 우와~ 저도 님 덕분에 한방에 성공했어요~ 감사합니다!!

    답글삭제
  41. 깜군님께서 쓰신 태그 구름 사용법을, 제 블로그에 재편집 하려고 합니다. 몇일전에 몇시간 고생하면서 결국 블로그 넣기에 성공하였는데, 이 좋은 기능이 초보자가 하기에는 약간 어려웠던거 같습니다. 그래서 그림을 조금 더 첨부하여, 사용방법을 추가하려고 하는데 글쓰신분에 동의를 얻으려고 합니다.

    답글삭제