Label Cloud Widget

Selain dengan cara biasa, kita bisa menampikan label widget dengan cara label cloud atau bila di terjemahkan label berbentuk awan. bentuk tampilannya yang memanjang ke samping merupakan solusi untuk merampingkan tempat bagi label ini. Selain itu untuk mengetahui Count-nya ( jumlah ) isi satu kategorie dalam label cloud akan terlihat tulisannya menjadi gebuk dan besar.

Bagiamana cara memasang-nya dengan mudah ke dalam area widget blogspot kita.

Pertama buka layout- add a gadget.  kemudian setelah terbuka jendela gadget, pilih gadget Label.

  

* Optional : pilih indek secara Alphabetically.

Setelah menambahkan sebuah gadget Label, buka tab Edit Html.. kemudian cari widget html label seperti di bawah ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Kemudian setelah ketemu ganti dengan kode di bawah ini.

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

<p align='center'>   
<script type='text/javascript'> 

var cloudMin = 1;   
var maxFontSize = 25; 

var maxColor = [0,255,0]; 

var minFontSize = 10;   
var minColor = [0,0,0];   
var lcShowCount = false;   
// 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(&#39;labelCloud&#39;);   
ul = document.createElement(&#39;ul&#39;);   
ul.className = &#39;label-cloud&#39;;   
for(var t in ts){ 

if(ts[t] &lt; cloudMin){ 
  
continue;   
}   
for (var i=0;3 &gt; 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(&#39;li&#39;);   
li.style.fontSize = fs+&#39;px&#39;; 
a = document.createElement(&#39;a&#39;);   
a.title = ts[t]+&#39; Posts in &#39;+t;   
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;   
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);   
if (lcShowCount){   
span = document.createElement(&#39;span&#39;);   
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;   
span.className = &#39;label-count&#39;;   
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(&#39; &#39;);   
ul.appendChild(abnk);   
}   
lc2.appendChild(ul); 
  
</script>   
</p>   
<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> 
  
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Widgets</a></small>   
<b:include name='quickedit'/> 
  
</div> 
</b:includable> 
 
</b:widget>

 

Sekarang cari kode ini.

]]></b:skin>

Setelah itu simpan di atasnya kode ini.

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

  

 

* NOTE ..

Untuk menganti font dan warna tulisan, kita cari kode ini kemudian ganti nilai .

var maxFontSize = 25;  ( * ukuran maksimal Font )
var maxColor = [0,255,0]; ( * warna tulisan maksimal )
var minFontSize = 10; ( * ukuran font minimal )

var minColor = [0,0,0]; ( * warna tulian minimal )

jika ingin merubah warnanya maka kita hanya bisa menulisnya secara RGB contoh :

(191, 23, 23) = warna merah

(12, 10, 175) = biru

(28, 143, 8) = hijau

(239, 210, 74) = kuning

(0, 0, 0) = hitam

(255, 255, 255) = putih

 

Source : bloggerplugins.org