Saturday, December 16, 2006

레이블 클라우드 Label Clouds in Blogger in Beta


블로거 베타에는 레이블을 지원하는데, 레이블을 사이드바에 표시할 경우 사이드바에 목록을 단순히 나열되는 방법만이 블로거 베타에서는 기본적으로 제공한다. 레이블을 태그 클라우드 Tag Cloud와 같이 레이블 클라우드 Label Cloud로 사이드 바에 표시할 수 있는 블로그 핵을 소개하고자 한다.

준비할 사항은 다음과 같지만, 이 사항들은 블로그에 이미 적용했다고 가정한다.
  • 블로거 베타로 전환되어 레이아웃 수정으로 페이지 요소 추가 및 정렬등이 가능해야 한다.
  • 레이블을 하나 이상 적용한 글이 있어야 한다.
  • 템플릿을 수정하기 전에 백업용으로 저장을 한다. (절차: 블로그 로그인 -> 레이아웃 수정 -> HTML 편집 -> 전체 템플릿 다운로드)
  • 레이블 위젯이 설치되어 있지 않다면 추가한다. (절차: 블로그 로그인 -> 레이아웃 수정 -> 페이지 요소 -> 페이지 요소 추가 및 정렬 -> 페이지 요소 추가 -> 레이블 위젯 추가)
  • 레이블 위젯 위치조정은 레이아웃 수정상태에서 클릭하여 원하는 위치로 끌어다 놓기만 하면 되므로 통과.

기존 템플릿을 백업용으로 저장한 것을 다른 이름으로 복사하여 수정하거나, '레이아웃 수정 -> 템플릿 HTML 편집'에서 직접 템플릿을 수정하여, 다음 3단계로 레이블 클라우드를 만들어 보자.

1. 스타일시트에 추가하기
아래 코드를 템플릿안의 ']]><b:skin>' 전에 복사하여 붙인다.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. 클라우드 컨피거레이션

아래 코드를 템플릿안의 ']]><b:skin>' 과 '</head>' 사이에 복사하여 붙인다.

<script type='text/javascript'>
// 레이블 클라우드 사용자 변수(Label Cloud User Variables)
// YOURBLOG는 사용자 블로그 주소로 바꾼다.
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
// 보여줄 레이블 수 조정, 1이면 전체 레이블 보여주기
var cloudMin = 2;
// 최대 글꼴 크기, 단위는 pixels
var maxFontSize = 24;
// 최대 글꼴 RGB 색상값
var maxColor = [255,140,0];
// 최소 글꼴 크기, 단위는 pixels
var minFontSize = 12;
// 최소 글꼴 RGB 색상값
var minColor = [190,190,190];
// 레이블이 적용된 포스트 수 표시, fasle는 표시안함
var lcShowCount = false;
</script>

3. 클라우드 위젯

템플릿에서 <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>을 찾은 다음, 아래의 코드를 복사하여 붙인다.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

템플릿을 내려 받아서 수정하였다면 '템플릿 HTML 편집'에서 템플릿을 업로드하여 저장하거나, 직접 '레이아웃 수정 -> 템플릿 HTML 편집'에서 수정하였다면 저장을 하고 블로그 보기를 하면 레이블 클라우드가 적용된 화면을 볼 수 있다.

27 comments:

  1. 오..지쟈쓰...
    지저깨비님 사랑해요.ㅠ_ㅠ
    정말 멋진걸요.

    ReplyDelete
  2. 그런데 수정하고 저장하니 굼ㄴ오류가뜨네요
    뭔가 닫히지 않았다고하는데
    코드를 이해하지못하는 저로서는 어찌할 도리가..
    코드는 그대로복사해서 붙인거같은데..
    포스트된 코드에 문제가있는건가요?

    ReplyDelete
  3. 지저깨비님두 적용하셨군요 :)
    레이블이 많으니 포털사이트의 태그 클라우드를 보는 느낌입니다.
    멋져요 ^^ 전에는 레이블 찾기가 어려웠는데 한결 찾기쉽고 한눈에 쏙 들어옵니다.

    ReplyDelete
  4. Wastemind님/
    코드 수정했습니다.
    복사해서 붙여서 실행 해 보시기 바랍니다. Original Source에서 소스복사해서 붙였더니 되더라구요.
    휴~~~~ ㅡ.ㅡa;;;

    ReplyDelete
  5. jaemini님 덕분에 Original Soure를 알게 되어 적용하게 되었습니다.
    Original Source를 틈틈히 번역하여 글쓰고 실제 블로그에 적용하느랴 시간이 조금 걸렸습니다.
    cloudMin = 1로 했더니 너무 많아서 cloudMin = 2로 했답니다.

    이쁜가요? ^^

    ReplyDelete
  6. 급한 성격에 본소스를 찾아가서 했는데 마구 안되다가 여러범 삽질끝에 성공했습니다 느긋하게 고쳐주시길 기다렸다 할걸 그랬나요? ㅋㅋ
    우야뜬 너무 잘 적용되었습니다.

    ReplyDelete
  7. wastemain님/ 어제 가서 보았습니다. 성질급한 사람이 일낸다고 이쁘게 적용하셨던데요. ^^
    미안합니다. 제대로 테스트도 못하고 올려서 삽질하게 해 드려서요.
    덕분에 이러저리 안돌아가는 머리굴리느랴 탱크 지나가는 줄 알았다는 이야기가... ^^

    ReplyDelete
  8. 며칠만에 온거 같은데 오늘 좋은 포스팅들 많이 보고 갑니다.

    ReplyDelete
  9. Wise View님. 반갑습니다.
    칭찬을 해 주시니 기분이 좋은데요. ^^

    ReplyDelete
  10. 처음 들렀는데 좋은 글들을 많이 올려놓으셨네요. 참고로 익숙하지 않으신 분들은 귀찮더라도 항상 템플릿 저장하고 적용하시는게 좋습니다. 어떤 핵은 잘못 건들이면 복구하기 힘들기도 하거든요^^

    ReplyDelete
  11. 칼리마니아님 썰렁한 제 블로그에 방문해 주셔서 감사합니다.
    말씀처럼 저도 요즘은 백업을 하고나서 템플릿 수정을 한답니다. 가끔은 성질 급한 이 사람은 바로 수정하기도 하지요. 그리고 미리보기하다가 맘에 안차면 그냥 빠져 나옵답니다. ^^

    ReplyDelete
  12. 좋은 정보 감사합니다.^^

    ReplyDelete
  13. Mr.Cha님.
    도움이 되셨다니 기쁘네요.
    오리지날 포스트를 쓰신 phydeaux3님이 받아야 할 칭찬과 감사를 제가 받게 되어 쑥스럽고 송구합니다.
    감사는 원문을 쓰신 phydeaux3님에게 돌립니다.

    ReplyDelete
  14. 오늘 블로거 베타로 변환했습니다. 레이블을 정리하던 중 정렬 방법이 마음에 안 들어서 이 글을 참고해서 달았습니다. 좋은 정보 고맙습니다.

    ReplyDelete
  15. Giga님. 먼저 New Blogger로 이주하신 것을 축하드립니다.

    오리지날 포스트나 이 글을 읽고 클라우드레이블을 다신 분들의 글을 보면 정렬방식을 중앙으로 하시더군요. 저는 왼쪽정렬방식으로 사용하고 있답니다.

    또한 색상선택기로는 테이블도 참고하지만 IE Toy에 있는 색상선택기를 추천합니다. HTML, RGB, C++, Hex값을 선택하여 추출할 수 있답니다.

    ReplyDelete
  16. 우와 좋은 정보 감사요 블로그가 이제 한층 더 업그레이드 된 기분이에요 ㅎ 넘 좋네요

    ReplyDelete
  17. skyline님 잘 활용해서 멋있는 태그 클라우드 보여주세요. ^^

    ReplyDelete
  18. 한 시간 걸려서 해냈어요! 정말 고맙습니다... 'w'

    ReplyDelete
  19. lucy/ 오~ 고생하셨군요. 감사는 뭘요. 즐거운 블로깅하세요.

    ReplyDelete
  20. 아,,저는 아무리해도 3번항목이 없네요,,
    아무리 찾아도 없네요,,
    이런것 같은 비슷한건 있는뎅,,
    꺽쇠b:widget id='Label1' locked='false' title='Labels' type='Label'/꺽쇠

    ReplyDelete
  21. knight4u/ 그 위치가 맞습니다. title만 Label Cloud로 수정하면 되는데요. ^^

    ReplyDelete
  22. 오랜만에 레이아웃을 바꿔서 레이블 클라우드를 적용하려고 했더니 각종 오류 때문에 할 수가 없네요. HTML언어에 일자무식인 저로서는 도저히 불가능합니다. T-T

    ReplyDelete
  23. [Giga] 저도 알음알음해서 했는데 말입니다. ^^

    ReplyDelete
  24. 에러만 나고, 전혀 안되네요. 구글 참 나쁜놈들 같다는. 더럽게 불편하게 해놨음

    ReplyDelete
  25. http://wonryong.blogspot.com/2008/09/label-cloud.html

    여기에 에러 해결했습니다. 아이고 힘들어!! ㅜㅜ

    ReplyDelete
  26. 그런데, 위에 소스코드 나타내는 창 어떻게 만드는지 좀 알려주세요. ㅜㅜ

    ReplyDelete