2012. 8. 17. 16:43

[블로그 꾸미기팁] 블로그에 태그 클라우드 설치하기!







이런이미지 많이 보셨죠? 이러한 글자로 이뤄진 이미지를 통틀어 태그 클라우드라고 합니다.

보통 블로그를 하시는 분들도 다들 태그를 걸어두시는데요~ 티스토리에 예쁘게 움직이는 태그 클라우드를 걸 수 있는 방법! 지금부터 알려드리겠습니다.



구름.rar


먼저 이 파일을 받아주세요!!



HTML/CSS로 가셔서 skin.html에서 태그목록 모듈을 찾습니다. 

제가 파란색으로 드래그 한 부분을 없애고 구름.rar에 있는 스크립트를 넣어주세요!


<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="./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>


저장하신다음 HTML/CSS 바로 옆에 있는 파일 업로드를 클릭해서 스크립트 말고 남은 두 파일을 모두 업로드 해주세요! 제목은 이미지에도 나와있지만 swfobject tagcloud입니다.


업로드가 되었다면 블로그에 예쁘게 자리가 잡혔을꺼에요!

저는 태그가 얼마 없어서 부실하지만 많으면 정말 이쁘게 움직일 것 같은 느낌이 들어요!



어떠세요? 어렵지 않죠?




Trackback 0 Comment 9
  1. Favicon of https://variousinterestedpeople.tistory.com BlogIcon L'artiste curieuse 2012.08.20 01:24 신고 address edit & del reply

    저도 이거 적용해보려고 하다가 귀찮아서 안했었네요. ㅎㅎ

    • Favicon of https://allbl.tistory.com BlogIcon about blog 카이로그 2012.08.20 09:34 신고 address edit & del

      샤이니님 블로그는 딱 깔끔하고 정리되어있는 분위기라 오히려 태그클라우드가 방해가 되지 않을까 하는 생각도 드네요^^

  2. Favicon of https://shipp.tistory.com BlogIcon 낙화- 2012.10.02 18:17 신고 address edit & del reply

    태그 클라우드 적용했는데 흰 공백으로뜨네요 -_- 어찌 고쳐주실수 없으세요?

    • Favicon of https://allbl.tistory.com BlogIcon about blog 카이로그 2012.10.04 09:16 신고 address edit & del

      안녕하세요^^ 지금 댓글을 확인했습니다 블로그 가보니 태그 클라우드를 깔끔하게 잘 적용하신걸 확인할 수 있었어요. 빨리 도움을 드리지 못해 정말 죄송해요~!! 감사합니다^^

  3. Favicon of http://bjm1212.tistory.com BlogIcon window전문인력 2012.10.11 21:19 신고 address edit & del reply

    퍼가요^^

  4. Favicon of http://apple22sky.tistory.com BlogIcon 닻별바라기 2012.11.25 09:23 신고 address edit & del reply

    잘 봤습니다:) 아직 꾸미지 않은 제 블로그에 나중에 써먹어야 겠습니다~

    • Favicon of https://allbl.tistory.com BlogIcon about blog 카이로그 2012.11.26 09:57 신고 address edit & del

      닻별바라가님! 와주셔서 감사해요 달아놓으니 귀여워요 꼭 예쁘게 적용하시길 바라요!

  5. Favicon of https://theeyeofatyphoon.tistory.com BlogIcon ety 2012.12.21 12:32 신고 address edit & del reply

    블로그를 개설만 해놓고 몇 개 올린거 없이 방치한지 오래, 태그를 바꾸었어요~ 감사합니다!!