구글 블로거에서 태그 클라우드 만들기
1. 먼저 레이아웃 > 페이지 요소 > 가젯 추가 를 한 다음 레이블 가젯을 추가합니다.
2. 레이아웃 > HTML 편집 으로 이동해서 도구템플릿 확장을 체크해 줍니다. 레이블 가젯을 직접 수정해 주어야 하기 때문입니다.
3. 1번에서 추가한 레이블 가젯을 찾습니다. title='레이블' 로 찾으시면 됩니다. 아래와 같은 html 템플릿을 확인할 수 있습니다.
4. <b:widget 부터 </b:widget> 까지를 레이블 다음 소스 코드로 바꿔 줍니다. 이 때 title='원하는 제목' 에서 블로그에서 표시하려는 제목을 적어주면 됩니다. 저는 Tag Cloud 라는 제목을 사용했습니다.
<b:widget id='TagCloud' locked='false' title='원하는 제목' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.
//Begin code:
var range = max - min;
//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>
//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}
//Make an independant copy of counts for sorting
var sorted = counts.slice();
//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount == 1)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>
5. 완료!
2. 레이아웃 > HTML 편집 으로 이동해서 도구템플릿 확장을 체크해 줍니다. 레이블 가젯을 직접 수정해 주어야 하기 때문입니다.
3. 1번에서 추가한 레이블 가젯을 찾습니다. title='레이블' 로 찾으시면 됩니다. 아래와 같은 html 템플릿을 확인할 수 있습니다.
4. <b:widget 부터 </b:widget> 까지를 레이블 다음 소스 코드로 바꿔 줍니다. 이 때 title='원하는 제목' 에서 블로그에서 표시하려는 제목을 적어주면 됩니다. 저는 Tag Cloud 라는 제목을 사용했습니다.
<b:widget id='TagCloud' locked='false' title='원하는 제목' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.
//Begin code:
var range = max - min;
//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>
//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}
//Make an independant copy of counts for sorting
var sorted = counts.slice();
//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount == 1)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>
5. 완료!
이거안되는데요...
답글삭제