블로그 이미지
Every unexpected event is a path to learning for you.

카테고리

분류 전체보기 (2307)
Unity3D (564)
Programming (470)
Unreal (4)
Gamebryo (56)
Tip & Tech (182)
협업 (34)
3DS Max (3)
Game (12)
Utility (114)
Etc (92)
Link (31)
Portfolio (19)
Subject (90)
iOS,OSX (37)
Android (12)
Linux (5)
잉여 프로젝트 (2)
게임이야기 (1)
Memories (19)
Interest (37)
Thinking (36)
한글 (26)
PaperCraft (5)
Animation (408)
Wallpaper (2)
재테크 (19)
Exercise (3)
나만의 맛집 (2)
냥이 (9)
육아 (5)
Total1,332,123
Today226
Yesterday172
Statistics Graph

달력

« » 2019.10
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

공지사항

태그목록







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


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




압출 파일을 풀면 swfobject.jstagcloud.swfscript.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) 하시면 됩니다. 



&lt;!-- 태그 구름 위젯 설정 --&gt; &lt;DIV style="DISPLAY: none" id=htags&gt; &lt;TAGS&gt; &lt;S_RANDOM_TAGS&gt; &lt;A class= href="http://grimreper.tistory.com/script/powerEditor/pages/"&gt; &lt;/A&gt; &lt;/S_RANDOM_TAGS&gt; &lt;A href="http://grimreper.tistory.com/"&gt;&lt;/A&gt; &lt;/TAGS&gt; &lt;/DIV&gt; &lt;DIV id=TiCumulus&gt; &lt;P&gt;Tistory Cumulus Flash tag cloud by &lt;A href="http://zoc.kr/"&gt;BLUEnLIVE&lt;/A&gt; requires Flash Player 9 or better.&lt;/P&gt; &lt;/DIV&gt; &lt;SCRIPT type=text/javascript src="./images/swfobject.js"&gt; &lt;/SCRIPT&gt; &lt;SCRIPT type=text/javascript&gt; 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\&gt;/gi, 'tags&gt;').replace(/\&lt;A\s/gi, '&lt;a ').replace(/\&lt;\/A\&gt;/gi, '&lt;/a&gt;').replace(/\"/g, "'") ); t.write("TiCumulus"); &lt;/SCRIPT&gt;




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








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





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




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

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

댓글을 달아 주세요

  1. 2012.07.20 02:20 신고 아네트kim  댓글주소  수정/삭제  댓글쓰기

    감사하니다..
    자꾸 실패한 원인이 삭제를 해야했군여..ㅎㅎ
    덕분에 문제점을 해결했답니다.^^
    기분 좋은날 되세여~~!!

  2. 2012.07.31 16:55 신고 엄마토끼  댓글주소  수정/삭제  댓글쓰기

    이 포스팅을 보고 저도 태그구름을 적용했는데요. 궁금한 거 하나만 혹시 여쭤볼게요.
    태그구름의 영역? 상자를 세로로 길게 하고 싶은데 어떤걸 수정해야 하는지,
    마우스를 가져다 대면 생기는 링크에서 네모를 없애려면 어떤걸 수정해야 하는지.. 궁금하네요.
    이 분야에 문외한인데 블로그를 예쁘게 해보려니 땀나네요...
    제가 정말 뭘 몰라서 무턱대고 여쭤본 것이니 무례하거나 무리한 질문이라면 씹어주세요;; ㅠㅠ
    아 좋은 글 감사하고요 ^^

    • 2012.07.31 20:22 신고 blueasa  댓글주소  수정/삭제

      리플 달아주셔서 감사합니다. :)
      음 우선 크기는..저도 그냥 막 적용해서 정확히 이거다..라고 말씀은 못드리겠습니다만..
      var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff";);
      얘 같습니다. 여기 수치를 조정해야 될 것 같은데요.
      그리고 그리고 마우스 갖다대면 나오는 네모칸은 저도 어느건지 모르겠습니다. 죄송해요.. =_=
      근데 현재 어느걸 클릭하는지 보여야 되니 있어야 되지 않을까 싶은데요.. 꼭 없애셔야 되나요..;;
      정확한 답변을 못드려서 죄송합니다. =ㅅ=;;

  3. 2012.09.03 19:21 신고 일로일로  댓글주소  수정/삭제  댓글쓰기

    너무 너무 감사 드려요
    제가 html 등 암것도 모르는데
    3주전 티스토리 시작했거든요 넘 난감할 때가 많아요
    이렇게 도와 주시는 분들이 계셔셔 정말 다행이지만. 저도 빨랑 좀씩이라고 배워야겠어요
    그리고 설명을 넘 쉽게!! 해주셔서 다시 한번 감사드려용

  4. 2012.10.02 15:44 신고 낙화-  댓글주소  수정/삭제  댓글쓰기

    태그 클라우드 적용했는데요, 흰색 바탕으로만 나오네요.. 이것때문에 몇시간을 헤맷는지. ㅠ 혹시 해결방법 아세요 ??

    • 2012.10.03 07:40 신고 blueasa  댓글주소  수정/삭제

      안녕하세요.
      위 소스 부분 적힌 곳 보시면
      &lt;SCRIPT type=text/javascript&gt;
      var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff";);
      이게 있는데요.
      #을 뺀 ffffff 가 흰색입니다.
      이부분을 조정하시면 됩니다. :)

      P.s. 겸사겸사 저도 블로그랑 같은색으로 조정했습니다.

  5. 2012.12.02 14:28  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 2012.12.02 20:49 신고 blueasa  댓글주소  수정/삭제

      음..
      위 설명대로 파일 업로드 하고 지정된 곳을 수정하셨다면 별 문제는 없으실텐데요..
      파일 업로드는 제대로 된건가요?
      블로그에 글이 하나도 안보이는데..
      글을 하나 써서(태그도 달고) 올린 후에 테스트를 해보세요.

  6. 2012.12.04 16:38  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  7. 2013.01.22 13:46 신고 아마개발자  댓글주소  수정/삭제  댓글쓰기

    감사합니다^^;; 덕분에 잘쓰겠습니다!!