태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
?

tips/Tistory Blog2010.05.15 22:58











태그 구름 (태그 클라우드:Tag Cloud) - 티스토리(Tistory)블로그에 태그 구름 적용하기










태그 구름 (Tag Cloud)메타 데이터에서 얻어진 태그들을 분석하여 중요도나 인기도등을 고려하여 시각적으로 늘어 놓아 웹사이트에 표시하는 것이라고 할 수 있습니다.
사용자는 이렇게 표시된 태그중 마음에 드는 키워드를 발견하고 그것을 선택하여 그 메타 데이터에 원래 연결된 웹 페이지로 이동을 하게 됩니다.


티스토리(Tistory) 블로그를 대상으로 하여 태그 구름(Tag Cloud)을 적용해 보도록 하겠습니다.




압출 파일을 풀면 swfobject.js, tagcloud.swf, script.txt 파일이 있습니다. 




1. swfobject.js, tagcloud.swf 파일들을 티스토리 파일 업로드 기능을 이용해서 업로드 합니다.







2. HTMLl/CSS 편집에서 소스 코드를 수정해야 합니다.




Ctrl+F 키를 눌러서 찾기 기능을 이용하여 '태그목록'을 검색하였습니다. 's_random_tags'로 검색하셔도 됩니다.
기존에 있는 태그목록 모듈인
<ul><s_random_tags> ~ </s_random_tags></ul> 부분을 삭제 하고 아래 스크립트를 작성합니다. 







스크립트를 보기 좋게 나열 하다 보니 소스코드 일부가 잘려 버렸네요 ;;
압축 파일 안에 보시면 script.txt  파일이 있는데요, script.txt  파일내용을 복사 (Ctrl+C) 해서  
<ul><s_random_tags> ~ </s_random_tags></ul> 부분을 삭제한 위치에서 붙여 넣기 (Ctrl+V) 하시면 됩니다.



<!-- 태그 구름 위젯 설정 --> <DIV style="DISPLAY: none" id=htags> <TAGS> <S_RANDOM_TAGS> <A class=&#91;&#35;&#35;_tag_class_&#35;&#35;&#93; href="http://grimreper.tistory.com/script/powerEditor/pages/&#91;&#35;&#35;_tag_link_&#35;&#35;&#93;"> &#91;&#35;&#35;_tag_name_&#35;&#35;&#93;</A> </S_RANDOM_TAGS> <A href="http://grimreper.tistory.com/"></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="./images/swfobject.js"> </SCRIPT> <SCRIPT type=text/javascript> var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff"); t.addVariable("tcolor", "0x222222"); t.addVariable("hicolor", "0xff0000"); t.addVariable("mode", "tags"); t.addVariable("distr", "true"); t.addVariable("tspeed", "100"); t.addParam("allowScriptAccess", "always"); t.addParam("wmode", "opaque"); t.addVariable( "tagcloud", document.getElementById('htags').innerHTML.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>




3. 적용이 완료 되었습니다.








{ 주석 처리하시면 제대로 적용되지 않습니다.
삭제 하시던가 추가할 스크립트 코드 보다 아래쪽에 위치하도록 하세요,
적용 안되는 오류를 찾는다고 자그마치 1주일이 소요 되었습니다. ㅠ.ㅠ }





혹시 스크립트 코드에 대한 자세한 사항이 궁금하시다면
http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/ 를 방문해 보시기 바랍니다.




영문으로 되어 있어서 보기가 좀 그렇지만,

태그 클라우드 적용시에 원하시는 모양으로 어느 정도 구현이 가능하지 않을까 생각 됩니다.








           
           

Posted by grimreper


댓글을 달아 주세요

  1. 비밀댓글입니다

    2010.05.23 14:49 [ ADDR : EDIT/ DEL : REPLY ]
    • 1. 제 경우엔 주석 처리해서 태그가 나오지 않던데요. 혹시 <ui>~</ui>부분을 주석 처리하셨나요 ?
      2. 포스팅 된 소스코드는 저에게 맞춰서 수정되었습니다.압축파일에 포함되어 있는 script.txt 파일에 있는 소스 코드를 이용하시면 됩니다.
      3. 스킨에 따라서 적용되는것과 적용되지 않는 경우가 간혹 있는것 같습니다.
      4. 코드에서도 표시되어 있듯이 소스코드를 수정하신 BluenLive님 블로그(http://zoc.kr)를 둘러보시는것도 좋을듯 합니다.

      2010.05.23 15:41 신고 [ ADDR : EDIT/ DEL ]
  2. 비밀댓글입니다

    2010.05.23 21:23 [ ADDR : EDIT/ DEL : REPLY ]
    • 적용하신 소스 코드를 보내주세요 .
      포스팅 할때 사용한 태그수는 상관이 없어요
      관리자 센터 화면 -> 스킨 -> 화면출력설정 -> 태그 부분에서
      10개 / 20개 / 30개 / 40개 - 인기순/ 이름순/ 임의순 으로 설정 가능 합니다.
      20개 정도로 출력 되도록 설정 하시면 태그수랑은 관계 없을거에요

      2010.05.24 07:54 신고 [ ADDR : EDIT/ DEL ]
  3. 소스 코드를 어떻게 해야 할지 몰라 그냥 여기로 복사합니다.
    <div id="htags" style="display:none;"><tags>
    <s_random_tags>
    <a href=class="http://soulculture.tistory.com/script/powerEditor/pages/"></a>
    </s_random_tags>
    <a href="http://soulculture.tistory.com/">
    </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="./images/swfobject.js"></script>
    <script type="text/javascript">
    var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff";);
    t.addVariable("tcolor", "0x222222";);
    t.addVariable("mode", "tags";);t.addVariable("distr", "true";);t.addVariable("tspeed", "100";);t.addParam("allowScriptAccess", "always";);
    t.addVariable("tagcloud", document.getElementById('htags').innerHTML.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>

    2010.05.29 21:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • <s_random_tags> 부분에 동일하게 변경해주세요
      아래에 있는 <a> 태그도 변경해주시면 될듯 합니다.
      ( <a> 태그 안에 "[ ## 부분에 있는 공백은 제거해주세요 )
      <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>

      네이트온 이용하시면 help_desks@nate.com 으로 원격으로 봐드릴게요~ 그래도 안되신다면 제가 할 수 있는 방법의 한계... ^^;

      2010.05.30 11:59 신고 [ ADDR : EDIT/ DEL ]
  4. 도움이 많이되었어요 고마워요 ~

    2010.06.04 02:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 감사합니다. 제 블로그에도 바로 적용시켰습니다^^

    좋은하루되세요~

    2010.07.14 13:07 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. ^^ 감사합니당~~ 하나하나 제 입맛에 고치는재미도 크네요~ 역시 티스토리가 진리인듯~!!

    2010.07.15 10:06 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 비밀댓글입니다

    2010.07.23 12:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 알집으로 압축을 풀면 script.txt swfobject.js tagcloud.swf 이렇게 3개의 파일이 들어 있습니다.
      TiCumulus.zip 파일을 다시 다운로드 받아서 압축풀어 보시구요 script.txt 파일이 나타나지 않으시면 제작자 블로그 http://zoc.kr를 방문하셔서 받아 보세요 ~

      2010.07.23 21:34 신고 [ ADDR : EDIT/ DEL ]
    • 비밀댓글입니다

      2010.07.26 19:43 [ ADDR : EDIT/ DEL ]
    • 잘 적용 되셨네요 축하 드립니다. ^^

      2010.07.26 21:36 신고 [ ADDR : EDIT/ DEL ]
  8. 덕분에 잘 적용해보았습니다~^^ 감사합니다.

    2010.08.20 01:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 감사합니다 적용잘되네요~!

    2010.08.27 16:15 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 예쁘네요~~~ ^-^ 감사히 사용하겠습니다~ ^-^)b

    2010.12.31 00:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 물자어의 그 그림 리퍼님이 세염?...신기하넹....아님..ㅋ 바이바이

    2011.08.10 20:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 주석처리가 뭔지 모르지만 하지 않은것 같고....
    구름 태그를 사용하고 있었거든요..근데 스킨 몇번 바꾸고 나니까 갑작 않되네염...
    그림리퍼님의 소스를 그대로

    <div id="htags" style="display:none;">
    <tags>
    <s_random_tags>
    <a href="" class=""></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="./images/swfobject.js">
    </script>

    <script type="text/javascript">
    var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff";);
    t.addVariable("tcolor", "0x222222";);
    t.addVariable("mode", "tags";);
    t.addVariable("distr", "true";);
    t.addVariable("tspeed", "100";);
    t.addParam("allowScriptAccess", "always";);
    t.addParam("wmode", "opaque";);
    t.addVariable("tagcloud", document.getElementById('htags').innerHTML.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>


    해봐도 되지않는....
    왜 그럴까염....^^;;

    2011.08.10 22:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 스킨에 따라서 지원되지 않는경우가 있는게 아닐까 하는 생각이 드네요 소스코드상에서는 문제가 없을듯 한데요
      <tags>
      <s_random_tags>
      <a href="" class=""></a>
      </s_random_tags>
      <a href="/"></a>
      </tags>
      부분에서 <a href='태그주소' 부분만 자신의것으로 설정해주면 됩니다.

      블로그에 구름태그적용 성공하셨네요 축하드려요~

      2011.08.14 11:38 신고 [ ADDR : EDIT/ DEL ]
  13. 다른 분이라 하시니 약간은 아쉽네염...
    관심 가져 주시고ㅋ 감사 하네염.^^;
    원인을 몰라 결국 데이터 날리고 백업 파일로 복구 했지염...ㅋ
    관심 감사 하그염 궁금 사항 있음 또 여쭤도 되져^^?;
    그럼 스거 하세염 (^^)(__)

    2011.08.25 01:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 좋은 정보 감사합니다. :)

    2012.01.27 14:39 신고 [ ADDR : EDIT/ DEL : REPLY ]