TISTORY 블로그 움직이는 TAG CLOUD(태그클라우드) 적용해 보자

'

 

블로그에 움직이는 TAG CLOUD 를 적용해는 방법을 소개 해드리겠습니다.

 

 

 

1. 첨부파일을 다운로드 받습니다. tagcloud.zip

 

 tagcloud.zip

DOWNLOAD

 

2. 관리자 페이지로 접속합니다.

    우측 상단에 my 메뉴를 통하여 관리를 누르시면 관리자 페이지로 접속됩니다.

HTML/CSS 편집 메뉴를 선택합니다.

 

 

3. 파일 업로드 탭을 선택하여 첨부 받은 파일을 업로드합니다.

4. 업로드 된 파일을 목록에서 확인을 하시고 저장을 버튼을 눌러주세요!

 

 

 5. 이제 태그 클라우드 스크립트를 등록할 차례입니다.

    다시 HTML/CSS 화면에서 skin.html 부분을 선택해주시고!

 

CTRL + F 검색창을 활성화 시켜서 다음과 같이 검색해주세요!

tag cloud

 

아래와 같이 검색이 됩니다!

 

 

6. 파일첨부로 다운로드 받은 파일 중에 script.txt 파일을 열어줍니다.

<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 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>

위의 내용을 5번 사진의 검색된 tag Cloud 밑에 <u1> </u1> 사이에 붙어넣기 해서 넣어주세요!

저장해주시면 바로 움직이는 태그가 적용되는 모습을 보실 수 있습니다.

  

추가적으로 script.txt의 소스 설정을 안내 해드리겠습니다.

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

100% : 가로크기

200 : 세로 크기

#ffffff: 태그 클라우드의 배경색상을 지정하는 부분입니다.

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

"0x222222 : 태그 클라우드의 글씨색상을 지정하는 부분입니다.

 

t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");

100 : 태그 클라우드의 움직이는 속도를 설정합니다. 100 -> 200 두배정도 속도가 빨라집니다.

 

 

'

 

정보가 도움이 되셨나요?

더 많은 사람과 정보 & 공감을 위해 아래 view on 손가락 꾸~욱 눌러주세요!