티스토리 사이드바 클라우드 태그 구름모양 바꾸기 - 플래쉬 적용

티스토리 사이드바 클라우드 태그 구름모양 바꾸기 - 클라우드태그

제 블로그 사이드바에 있던 태그가 기존에는 텍스트 형식으로 표현이 됐습니다. 처음에는 그렇게 보기가 안좋은지 몰랐는데, 태그가 많아지면서 아래로 아래로 뻣치면서 내려가고 있었습니다. 이웃 블로그를 방문하다가 보니 태그가 구름 모양으로 이쁘게 바껴져 있는걸 보고 어떻게 바꾸는지 찾았습니다. 그래서 제 블로그에 적용을 시켰는데, 참 보기가 좋더라구요. ^^

이번 포스팅은 기존에 텍스트 클라우드 태그를 플래쉬 모양으로 바꾸는 방법을 포스팅 하려 합니다. 
 

태그 클라우드(Tag Cloud)는 웹 사이트 내에서 사용되 태그를 시각적으로 표현한 태그 리스트입니다.
태그는 인기도, 빈도수, 최신성 등 중요도 산정 기준에 의해 시각적 비중이 높아지며, 이는 서체 크기로
표현이 됩니다.
그래서 그 크기 차이를 인식시켜 얼마나 인기 있는 태그(Popular Tags)인지 또는 얼마나 최근에 등장한 태그(Recent tags)인지 시각적으로 판단할 수 있게 합니다. 이러한 태그 클라우드는 좁은 영역에 많은
단어들이 밀집되어 있기 때문에 인식하기 쉽고 읽기 편한 구성이 요구된다. 
                                                                           출처: 웹2.0기획과 디자인(노주환)

구름 보양의 태그 클라우드를 플래쉬를 적용하기 위해서는 먼저 필요한 파일을 다운받아서 저장하셔야 합니다. 

 

Tag_Cloud.rar

저장하셨으면  압축 파일을 풀어서 보면 3개의 파일이 있습니다.

swfobject 파일과 tagcloud 파일 그리고 스크립트를 설명해 놓은 파일이 있습니다.

먼저 swfobject 파일과 tagcloud 파일을 HTML/CSS 편집 으로 들어가셔서 파일을 업로드 하셔야 합니다.
   -> 1번을 클릭하면 파일 업로드 화면으로 넘어가고 2번을 클릭하시면 소스 편집화면으로 넘어가게 됩니다.

Ctrl+F 를 누르셔서 태그목록을 치시면 교체해야할 파일로 찾아가게 됩니다 .
 

   <!-- 태그목록 모듈 -->
   <div id="tagbox">
   <h3>태그목록</h3>

   <ul>
       <s_random_tags>
        <li><a href="" class="">
        </a></li>
        </s_random_tags>
   </ul>

   </div>

빨간색 부분을 지운 후 그 자리에 다운로드 받은 스크립트 파일의 소스하고 바꿔주시면 됩니다.

 소스 코드에서 자신의 블로그에 맞도록 수정 가능합니다.

   var t = new SWFObject
             ("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");

100% : 가로크기
200 : 세로크기
#ffffff : 태그 클라우드의 배경색

t.addVariable("tcolor", "0x222222");

태그의 글씨색

t.addVariable("tcolor2", "0x55ff00");

빈도수가 높은 태그의 글씨 색상

t.addVariable("hicolor", "0x00ffff");

마우스가 올려진 태그의 글씨 색상

t.addVariable("tspeed", "150");

태그들이 움직이는 속도, 숫자가 높을 수록 빙글빙글 도는 속도가 빨라짐

다운로드 받은 소스를 교체해준 후 미리보기를 누르시면 플래쉬가 적용된 내 블로그를 확인 할 수가 있습니다 . 미리보기에서 적용이 된 모습을 보이지 않으면, 저장 한 후에 확인해 보시면 됩니다. 간혹 미리보기에서 확인되지 않는 경우가 있었습니다.

조금씩 조금씩 변화되고 있는 블로그를 볼때마다 뿌듯한 마음이 들고 있습니다.

이 글은 http://jesus96.tistory.com/78 을 참고로 하였습니다. 블로그 꾸미는데 좋은 정보들을 자세하게 설명해 주고 있는 블로그 입니다.

[관련연관글]
티스토리장점.티스토리블로그 하면  좋은점
대학생재테크방법, 아르바이트돈으로재테크할 수 있는 대학생 재테크방법, 용돈재테크법
[돈모으는법] 2012년 재테크방법,재무설계방법,20대,30대,40대 재테크방법
돈불리기, 돈불리는방법 알기 위한 필수 정보, 초보재테크돈 불리는방법
재무설계상담, 재테크상담
재무설계비용 알아보고, 무료재무설계 받을 수 있는 곳